Динамическая загрузка файлов Javascript и загрузка событий завершения - PullRequest
Новая
       32

Динамическая загрузка файлов Javascript и загрузка событий завершения

4 голосов
/ 19 августа 2010

сегодня я работаю над загрузкой динамического кода JavaScript (файлов). Я использую решение: 

function loadScript(scriptUrl) {
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement('script');
        script.id = 'uploadScript';
        script.type = 'text/javascript';
        script.src = scriptUrl;
        head.appendChild(script);
    }

проблема в том, что я не знаю, как убедиться, когда выполняется содержимое скрипта. Так как скрипт содержит классы (хорошо JS классы), я записал функцию, которая вызывается через setTimeout и проверяет, определены ли эти объекты. Это не гибко и не автоматически. Так? Есть ли способы загрузить эти сценарии и получить надежное уведомление о том, когда они были выполнены?

Ответы [ 3 ]

3 голосов
/ 19 августа 2010

Вы можете использовать getScript jquery и передать функцию обратного вызова. 

$.getScript("test.js", function(){
   alert("Script loaded and executed.");
 });

См .: jquery .

2 голосов
/ 19 августа 2010

Самый простой способ, за исключением библиотеки JS, - сделать XMLHttpRequest и eval () возвращаемым.Ваша «загрузка» будет при возврате данных, а «oninit» будет сразу после того, как вы eval'd.

РЕДАКТИРОВАТЬ: Если вы хотите упорядочить это, вы можете создать AssetLoader, который принимаетмассив сценариев и не будет выполнять eval () сценарий, пока предыдущий не будет выбран и инициализирован.

РЕДАКТИРОВАТЬ 2: Вы также можете использовать материал script.onload в сообщении, указанном в комментариях.Метод eval имеет небольшое преимущество в том, что вы можете разделять и контролировать части загрузки и выполнения импорта скрипта.

РЕДАКТИРОВАТЬ 3: Вот пример.Рассмотрим файл с именем foo.js, который содержит следующее: 


function foo () {
    alert('bar');
}

Затем выполните следующую команду на другой странице вашего браузера: 



function initScript (scriptString) {
    window.eval(scriptString);
}

function getScript (url, loadCallback, initCallback, callbackScope) {

    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onreadystatechange = function (e) {

        if (req.readyState == 4) {
            if (loadCallback) loadCallback.apply(callbackScope);
            initScript.call(null, req.responseText);
            if (initCallback) initCallback.apply(callbackScope);
        }

    }

    req.send();

}

function fooScriptLoaded () {
    alert('script loaded');
}

function fooScriptInitialized () {
    alert('script initialized');
    foo();
}

window.onload = function () {
    getScript('foo.js', fooScriptLoaded, fooScriptInitialized, null);
}

Вы увидите оповещения "скрипт загружен", "скрипт инициализирован" и "бар".Очевидно, что реализация XMLHttpRequest здесь не завершена, и есть много всего, что вы можете сделать для любой области, в которой вы хотите выполнить скрипт, но это является его ядром.

0 голосов
/ 19 августа 2010

Вы можете использовать переменную счетчика и тип обратного вызова: 

var scriptsToLoad = 10;
var loadedScripts = 0;
//...
function increaseLoadCount() {
loadedScripts++;
if(loadedScripts == scriptsToLoad) {
alert("start here");
}
}

//script1-10.js
increaseLoadCount();

Может быть, немного лучше, чем с тайм-аутом ..

...