如何动态加载来自不同域的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）