Как вызвать функцию, когда загружается файл async Javascript?

Question

У меня возникли проблемы с функцией вызова после включения/загрузки стороннего виджета на моем веб-сайте.

Рассмотрите этот сценарий. Я загружаю скрипт, который генерирует виджет из сторонней библиотеки, подобной этой.

<script> 
var element= document.createElement("script"); 
element.src = 'http://example.com/script.js'; 
document.body.appendChild(element); 
</script> 

После окончания загрузки он затем создает #someElement Div тег, который имеет атрибут style с некоторыми правилами и присоединяет его к элементу тела.

Что я хочу сделать, это удалить этот атрибут style и добавить класс CSS.

Итак, вопрос в том, как я могу проверить, когда этот файл загружен, или этот элемент создан и после этого вызывается моя функция?

Спасибо!

Answer 1

Чтобы проверить, если скрипт загружен или нет:

Если скрипт создает какие-либо переменные или функции в глобальном пространстве вы можете проверить их существования:

External JS (в глобальном масштабе) -

var myCustomFlag = true; 

А чтобы проверить, если это запустить:

if (typeof window.myCustomFlag == 'undefined') { 
    //the flag was not found, so the code has not run 
    $.getScript('<external JS>'); 
} 

You может проверить наличие тега в вопросе, выбрав все элементы и проверять их атрибуты SRC:

//get the number of `<script>` elements that have the correct `src` attribute 
var len = $('script').filter(function() { 
    return ($(this).attr('src') == '<external JS>'); 
}).length; 

//if there are no scripts that match, the load it 
if (len === 0) { 
    $.getScript('<external JS>'); 
}Or you can just bake this .filter() functionality right into the selector: 

var len = $('script[src="<external JS>"]').length; 

для дальнейшего обсуждения. см.: Verify External Script Is Loaded