Two ways to dynamically load JavaScript files_javascript tips

This article mainly introduces two methods of dynamically loading JavaScript files. Interested friends can refer to it
The first is to use ajax to load the script file code from the background to the foreground, and then execute the code through eval() on the loaded content. The second is to dynamically create a script tag, configure its src attribute, and load js by inserting the script tag into the head of the page, which is equivalent to writing a

The following code is how to create this tag through js (and add it to the head):
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 call.js is loaded, we have to call the methods in it. However, we cannot call the js immediately after header.appendChild(script). Because the browser loads this js asynchronously, we don't know when it has finished loading. However, we can determine whether helper.js is loaded by listening to events. (Assume 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 onreadystatechange is used in IE, and gecko, webkit browsers and opera all support onload. In fact, this.readyState == 'complete' does not work very well. In theory, the state changes are as follows:
1.uninitialized
2.loading
3.loaded
4.interactive
5.complete
But some states will be skipped. According to experience, in IE7, only one of loaded and completed can be obtained, but not both. The reason may be that the state change affects whether reading from the cache is affected, or it may be other reasons. It is best to change the judgment condition to this.readyState == 'loaded' || this.readyState == 'complete'

Referring to the implementation of jQuery, our final implementation is: 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);

Another simple situation is to write the help() call at the end of helper.js, then it can be guaranteed that help() can be called automatically after helper.js is loaded. Of course, it must be like this in the end. Not the right app for you.

Additional things to note:

1. Because the src of the script tag can access resources across domains, this method can simulate ajax and solve the problem of ajax cross-domain access.
2. If the HTML code returned by ajax contains script, directly inserting innerHTML into the dom will not make the script in the HTML work. After a cursory look at the original code of jQuery().html(html), jQuery also parses the incoming parameters first, strips off the script code, and dynamically creates script tags. The jQuery html method is used to add the html into the dom if it contains script. is executable. Such as:

Copy code The code is as follows:

jQuery("#content").html("<script>alert(' aa');</script>");

The above is the method of dynamically loading JavaScript files. I hope it will be helpful to everyone's learning.