您如何从不同的域动态加载 javascript 文件？答案

【问题标题】：How do you dynamically load a javascript file from different domain?您如何从不同的域动态加载 javascript 文件？
【发布时间】：2009-02-27 03:36:55
【问题描述】：

我发现这个由aemkei 发布的优秀代码作为这些问题的答案：

您可以编写动态脚本标签（使用原型）：
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，就像上面的脚本一样，但是来自另一个域？

【问题讨论】：

标签： javascript

【解决方案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
    }
};

【讨论】：

【解决方案2】：

现代浏览器中的安全模型阻止 JavaScript 发出跨域请求。这有漏洞（请参阅自互联网诞生以来的每个网站漏洞利用），但使用它们不仅有点阴暗，而且修补它们只是时间问题。

【讨论】：

我认为我们可以通过 ajax 代理来做到这一点，但是，对于大多数实际用例，这绝对是合适的答案。 ;-) 谢谢。

【解决方案3】：

Rex 说的是对的，虽然 HTML5 添加了跨域消息传递和 xhr，这需要您做一些工作，但应该可以用来实现这一点。唉，它们还没有出现在所有已发布的浏览器中（我认为 safari、firefox 和 IE 的最新测试版已支持其中一些功能，但我不确定哪些浏览器支持哪些 api）

【讨论】：