Динамическая, кросс-браузерная script загрузка

Я знаю, что IE не имеет события load для элементов <script> - есть ли способ компенсировать это надежно?

Я видел некоторые разговоры о вещах (например, requestState == "complete"), но ничего очень поддающегося проверке.

Это нужно использовать, чтобы код вызывался после завершения загрузки script, поэтому мне не нужно использовать AJAX для загрузки новых источников (тем самым устраняя проблемы с междоменным AJAX).

Ответы

Ответ 1

Вы можете использовать загрузчик script, например head.js. Он имеет свой собственный обратный вызов нагрузки, и это также уменьшит время загрузки.

Из кода headjs: (слегка измененный, чтобы быть более портативным)

function scriptTag(src, callback) {

    var s = document.createElement('script');
    s.type = 'text/' + (src.type || 'javascript');
    s.src = src.src || src;
    s.async = false;

    s.onreadystatechange = s.onload = function () {

        var state = s.readyState;

        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };

    // use body if available. more safe in IE
    (document.body || head).appendChild(s);
}

Ответ 2

Я хочу добавить, что если вы не поддерживаете IE7 и ниже, вам не нужен материал onreadystatechange. Источник: quircksmode.org

Упрощенный и рабочий код из исходного ответа:

function scriptTag (src, callback) {

   // src is just a string now!

    var s = doc.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    s.async = false;
    s.onload = callback;        
    document.body.appendChild(s);
}

Ответ 3

Это просто расширение ответа ilia. Я использовал scriptTag следующим образом: отлично работает:

    // these 3 scripts load serially.

    scriptTag(boot_config.DEPENDENCIES.jquery,function(){
        // jquery ready - set a flag
        scriptTag(boot_config.DEPENDENCIES.jqueryui,function(){
            // jqueryui ready - set a flag
            scriptTag(boot_config.DEPENDENCIES.your_app,function(){
                // your_app is ready! - set a flag
            });
        });
    });

    // these 2 scripts load in paralell to the group above

    scriptTag(boot_config.EXTERNALS.crypto,function(){
        // crypto ready - set a flag
    });

    scriptTag(boot_config.EXTERNALS.cropper,function(){
        // cropper ready - set a flag
    });