Two ways to dynamically load JavaScript files _javascript tips

This article mainly for you to introduce the dynamic loading JavaScript file two methods, interested in the small partners can refer to
The first is the use of Ajax, the script file code from the background to the foreground, and then the loaded content after the eval () implementation code. The second is, static and dynamic create a script tag, configure its SRC attributes, after the script tag inserted into the page head to load JS, equivalent to writing a <script in the head src= "..." ></SCRIPT> But this script tag is created with JS static.
The analogy is that we want to load a callbakc.js, we need to just how a script tag:
The code is as follows:

Copy Code code as follows:

<script type= "Text/javascript" src= "Call.js" ></script>

The following code is how to create this tag (and add it to the head) through JS:
The code is as follows:

var head= document.getelementsbytagname (' head ') [0]; 
var script= document.createelement (' script '); 
Script.type= ' Text/javascript '; 
script.src= ' call.js '; 
Head.appendchild (script); 

When the call.js is loaded, we will call the method. But after Header.appendchild (script) we can not immediately call the JS. Because the browser is the asynchronous loading of this JS, we do not know when he finished loading. However, we can determine whether the helper.js is completed by listening to events. (Suppose there is a callback method in Call.js) the code is as follows:

var head= document.getelementsbytagname (' head ') [0]; 
var script= document.createelement (' script '); 
Script.type= ' Text/javascript '; 
script.onreadystatechange= function () { 
if (this.readystate = = ' complete ') 
callback (); 
} 
script.onload= function () { 
callback (); 
} 
script.src= ' helper.js '; 
Head.appendchild (script);

I set up 2 event listening functions because I use onreadystatechange in IE, and Gecko,webkit browser and opera support onload. In fact this.readystate = = ' complete ' does not work very well, and the theoretical change in state is the following steps:
1.uninitialized
2.loading
3.loaded
4.interactive
5.complete
But some states can be skipped. According to experience in IE7, only one of the loaded and completed can be obtained, not all of them, perhaps because the judgment is not read from the cache that affects the state change or other reasons. It is best to change the conditions of judgment to This.readystate = ' Loaded ' | | This.readystate = ' complete '

Reference to the implementation of jquery we finally implemented: the code is as follows:

var head= document.getelementsbytagname (' head ') [0]; 
var script= document.createelement (' script '); 
Script.type= ' Text/javascript '; 
Script.onload = Script.onreadystatechange = function () { 
if (!this.readystate | | this.readystate = = "Loaded" | | this. ReadyState = = = "complete") {Help 
(); 
Handle memory leak in IE 
script.onload = Script.onreadystatechange = null; 
}; 
script.src= ' helper.js '; 
Head.appendchild (script);

There is also a simple case where you can write the call to help () at the end of the helper.js, so that you can automatically invoke help () when the helper.js is loaded, and, of course, whether it is appropriate for your application at the end.

Also need to note:

1. Because the SRC of the script label can access resources across domains, this approach can simulate Ajax and solve the problem of Ajax Cross-domain access.
2. If script is included in the HTML code returned with Ajax, inserting the script directly into the DOM with innerHTML is not a function in HTML. A rough look at jquery (). HTML (HTML) of the original code, jquery is also first parse the incoming parameters, stripped out of the script code, dynamically create a script tag, The HTML method of using jquery is added to the DOM if it contains script that can be executed. Such as:

Copy Code code as follows:

JQuery ("#content"). HTML ("<script>alert (' AA ');<\/script>");

The above is the dynamic loading JavaScript file method, I hope to help you learn.