如何动态加载来自不同域的javascript文件？

Question

I find this excellent code, posted by aemkei as answers to this questions:

1. How do you dynamically load a javascript file? (Think C's #include)
2. Use javascript to inject script references as needed?

You may write dynamic script tags (using Prototype):

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

The problem here is that we do not know when the external script file is fully loaded.

We often want our dependant code on the very next line and like to write something like:

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

There is a smart way to inject script dependencies without the need of callbacks. You simply have to pull the script via a synchronous AJAX request and eval the script on global level.

If you use Prototype the Script.load method looks like this:

 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); } }; 

I found that, the code does not work on IE if the all of them is executed in 'file://' protocol, however, it is not the problem since its use case involved real web application.

I tried it once to include http://www.google-analytics.com/urchin.js by google, but from one of web page, but it looks like it cannot request javascript file from different domain.

How we could dynamically add javascript, just like what above scripts does, but from another domain?

Answer 1

You can use the onload and onreadystatechange event to understand when the <script> tag is loaded.

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

The security model in modern browsers prevents JavaScript from making cross-domain requests. That has holes (see every website exploit since the beginning of the internet), but using them is more than a little shady and it's only a matter of time before they're patched.

Answer 3

What Rex said is correct, although HTML5 has added cross domain messaging and xhr, which require a little bit of work on your part but should be usable to achieve this. Alas they're not yet present in all released browsers (i think the latest betas of safari, firefox, and IE have support for some of these features, but i'm not sure which browsers support which apis)