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

您可以使用onloadand 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 发出跨域请求。其中存在漏洞（自互联网诞生以来，请参阅每个网站的漏洞利用），但使用它们不仅仅是一点阴暗，而且修补它们只是时间问题。