Как вызвать функцию в динамически созданном скрипте?

Question

Есть скрипт №1 который создает элемент - скрипт №2 и инжектит его в документ. Как в первом скрипте вызвать функцию из второго скрипта?

$.get(chrome.extension.getURL('injected.js'),
function(data) {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.innerHTML = data;
    document.getElementsByTagName("head")[0].appendChild(script);
    document.getElementsByTagName("frame")[3].setAttribute("onLoad", "injected();");
    
    chrome.runtime.onMessage.addListener(gotMessage)
    function gotMessage (message, sender, sendResponse) {
        //ВОТ ТУТ НАДО ВЫЗВАТЬ ФУНКЦИЮ ИЗ ВТОРОГО СКРИПТА
    }
});

Причем строчка ниже отрабатывает

document.getElementsByTagName("frame")[3].setAttribute("onLoad", "injected();");

как сделать вызов функции не только после onLoad?

UPDATE 2

$.getScript(chrome.extension.getURL('injected.js'), function(data, textStatus, jqxhr) {
    console.log(data, textStatus, jqxhr) //undefined "success" {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ,setRequestHeader: ƒ, overrideMimeType: ƒ, …}
    injected(); //Error in event handler: ReferenceError: injected is not defined
});

Получается что скрипт создается (после инжекта вызываются методы, логи) но в getScript() data == undefined. Ну и injected(); не находит

Answer 1

Если у вас уже есть JQuery судя по коду, то используйте getScript. Загруженный таким образом скрипт будет выполнен в глобальном контексте, и затем будет вызвана ваша callback-функция.

Смотрите пример, в котором загружается плагин для анимирования цветов, а затем запускается анимация посредством этого плагина:

$.getScript("https://code.jquery.com/color/jquery.color.js", function(data, textStatus, jqxhr) {

  //ВОТ ТУТ МОЖНО ВЫЗВАТЬ ФУНКЦИЮ ИЗ ВТОРОГО СКРИПТА
  $("#block").animate({ backgroundColor: "rgb(255, 0, 0)" }, 5000);

});

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<div id="block">Hello World!</div>

В вашем случае:

$.getScript(chrome.extension.getURL('injected.js'), function(data, textStatus, jqxhr) {
  injected();
});

БЛОГ НА HUSL

Как вызвать функцию в динамически созданном скрипте?

Ответы (1 шт):