2011-08-18 102 views
6

我需要动态地和顺序地加载一些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(例如,客户端有旧版本),我应该怎么做?

+0

关于你提到的更新:为什么不包括库加载脚本(比如jQuery的)像任何其他JavaScript文件: 我看不到一个简单的方法或动态添加要用来动态加载脚本的库的必要性。 – Preli

+0

@Preli,它将被嵌入到另一个具有一个脚本和一个div标签的站点。 – 2xMax

回答

10

我想你需要的是jQuery.getScript

功能需要一个网址和一个成功的方法,使用它可以脚本链负荷,因此它们加载顺序:

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

RequireJS

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

说是IE 6+,Firefox2 2+,Safari 3.2+,Chrome 3+和Opera 10+兼容。

8

这里是我的加载使用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 */; }); 
-1

在Chrome中,我们可以使用onloadonerror更换onreadystatechange