Question

我需要动态地和顺序地加载一些js文件（即第二个脚本在第一个加载完成后加载，第二个加载完第二个等等）。

问题：如何检测脚本何时加载？我遇到过onload事件的问题 - 它不会在IE8中触发。在阅读this之后，我尝试订阅onreadystatechange并编写了非常难看的代码来加载脚本：

function loadScript(url, callback) {
        var isLoaded = false;
        var script = document.createElement('script');

        script.onreadystatechange = function () {
            if ((script.readyState == 'complete' || script.readyState == 'loaded') && !isLoaded) {
                if (callback) callback();
            }
        };
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', url);
        document.head.appendChild(script);
    };

如果没有这些技巧，你能建议更好的跨浏览器解决方案吗？

UPD： 谢谢你的回答。如果我还需要加载jquery.js（例如，客户端有旧版本），我该怎么办？）？

Answer 1

我认为您需要的是jQuery.getScript

该函数采用URL和成功方法，您可以使用该方法链接加载脚本，然后按顺序加载它们：

jQuery.getScript( url, function() { 
  jQuery.getScript( url2, function() 
    {/*... all 2 scripts finished loading */}
  );
});

Answer 2

以下是使用jQuery.getScript（）;

加载多个脚本的代码段

function getScripts(inserts, callback)
{
    var nextInsert = inserts.shift();
    if (nextInsert != undefined)
    {
        console.log("calling"+nextInsert);
    jQuery.getScript(nextInsert, function(){ getScripts(inserts, callback); })
            .fail(function(jqxhr, settings, exception){alert("including "+nextInsert+" failed:\n" +exception)});
    }
    else
    {
        if (callback != undefined) callback();
    }
};

用法：

var includes = [
    "js/script1.js",
    "js/script2.js",
    "js/script3.js"
];

getScripts(includes, function(){ /* typically a call to your init method comes here */; });

Answer 3

RequireJS：

...是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用，例如Rhino和Node。使用像RequireJS这样的模块化脚本加载器可以提高代码的速度和质量。

表示它是IE 6 +，Firefox2 2 +，Safari 3.2 +，Chrome 3+和Opera 10+兼容。

Answer 4

在Chrome中，我们可以使用onload和onerror来替换onreadystatechange。

动态脚本加载的最佳方式

4 个答案: