動態腳本加載的最佳方式

我需要動態地和順序地加載一些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（例如，客戶端有舊版本），我應該怎麼做？

來源

2011-08-18 2xMax

關於你提到的更新：爲什麼不包括庫加載腳本（比如jQuery的）像任何其他JavaScript文件：我看不到一個簡單的方法或動態添加要用來動態加載腳本的庫的必要性。 – Preli

@Preli，它將被嵌入到另一個具有一個腳本和一個div標籤的站點。 – 2xMax

我想你需要的是jQuery.getScript

功能需要一個網址和一個成功的方法，使用它可以腳本鏈負荷，因此它們加載順序：

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

來源

2011-08-18 17:01:07 Preli

RequireJS：

...是一個JavaScript文件和模塊加載器。它針對瀏覽器內的使用進行了優化，但可用於其他JavaScript環境，如Rhino和Node。使用像RequireJS這樣的模塊化腳本加載器可以提高代碼的速度和質量。

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

來源

2011-08-18 17:03:52 betamax

這裏是我的加載使用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 */; });

來源

2013-03-07 16:00:41

-1

在Chrome中，我們可以使用onload和onerror更換onreadystatechange。

來源

2014-08-24 14:03:19 IlPADlI

動態腳本加載的最佳方式

回答

相關問題