There are about two ways to dynamically load scripts to the page
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, set 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):
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 method to be called. 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)
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 , both webkit browsers and opera support onload. In fact this.readyState == 'complete' does not work very well. In theory, the state changes are as follows:
0 uninitialized
1 loading
2 loaded
3 interactive
4 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:
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 case is to put help() If the call is written at the end of helper.js, you can ensure that help() can be automatically called after helper.js is loaded. Of course, you must also be able to see if this is suitable for your application.
In addition, please 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. For example:
jQuery("#content").html( "<script>alert('aa');</script>");