如何動態加載來自不同域的javascript文件？

Question

我發現這個優秀的代碼，由aemkei發布，作為這些問題的答案：

1. 你如何動態加載JavaScript文件？ （想想C的#include）
2. 使用javascript根據需要注入腳本引用？

您可以編寫動態腳本標記（使用Prototype）：

 new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"}); 

這里的問題是我們不知道外部腳本文件何時完全加載。

我們經常希望我們的依賴代碼在下一行，並喜歡寫下這樣的東西：

 if (iNeedSomeMore){ Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod(); myFancyMethod(); // cool, no need for callbacks! } 

有一種智能方法可以在不需要回調的情況下注入腳本依賴項。 您只需通過同步AJAX請求拉出腳本並在全局級別上評估腳本。

如果使用Prototype，則Script.load方法如下所示：

 var Script = { _loadedScripts: [], include: function(script){ // include script only once if (this._loadedScripts.include(script)){ return false; } // request file synchronous var code = new Ajax.Request(script, { asynchronous: false, method: "GET", evalJS: false, evalJSON: false }).transport.responseText; // eval code on global level if (Prototype.Browser.IE) { window.execScript(code); } else if (Prototype.Browser.WebKit){ $$("head").first().insert(Object.extend( new Element("script", {type: "text/javascript"}), {text: code} )); } else { window.eval(code); } // remember included script this._loadedScripts.push(script); } }; 

我發現，如果所有這些代碼都在'file：//'協議中執行，那么代碼在IE上不起作用，但是，它不是問題，因為它的用例涉及真正的Web應用程序。

我嘗試了一次，包括谷歌的http://www.google-analytics.com/urchin.js ，但是從一個網頁，但看起來它不能從不同的域請求javascript文件。

我們如何動態添加javascript，就像上面的腳本一樣，但是來自另一個域？

Answer 1

您可以使用onload和onreadystatechange事件來了解何時加載<script>標記。

var script = new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});

script.onload = script.onreadystatechange = function(){
    if (!this.readyState ||
        this.readyState == "loaded" || this.readyState == "complete") {
        //script is loaded
    }
};

Answer 2

現代瀏覽器中的安全模型可防止JavaScript發出跨域請求。 這有漏洞（從互聯網開始以來看到每個網站的漏洞利用），但使用它們不僅僅是一點點陰暗，而且它們在修補之前只是時間問題。

Answer 3

Rex所說的是正確的，盡管HTML5已經添加了跨域消息傳遞和xhr，這需要您做一些工作，但應該可以實現這一點。 唉他們還沒有出現在所有發布的瀏覽器中（我認為safari，firefox和IE的最新測試版支持其中一些功能，但我不確定哪些瀏覽器支持哪種apis）