This article mainly introduces two methods to dynamically load JavaScript files. Interested friends can refer to it.
The first is to use the ajax method to load the script file code from the background to the foreground, and then implement the code for the loaded content through eval(). The second type is to 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 <script src="..."></script> in the head, but this script tag is created using js src.
For example, if we want to load a callbakc.js dynamically, we need a script tag:
The code is as follows: Copy the code as follows: <script type="text/javascript" src="call.js"></script>
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 need to call the methods in it. However, after header.appendChild(script) we cannot call js immediately. Because the browser loads this js asynchronously, we don't know when it will be loaded. However, we can judge whether helper.js is loading through 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 onreadystatechange is used in ie, while onload is supported by gecko, webkit browser and operator. In fact, this.readyState == 'complete' does not work very well. Theoretically, 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, you can only get one of loaded and completed, and it cannot both appear. The reason may be that you determine whether reading from cache affects the change in the state, or other reasons. It is best to change the judgment condition to this.readyState == 'loaded' || this.readyState == 'complete'
Referring to the implementation of jQuery, we finally implemented it as follows: 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 another simple situation that you can write the call to help() at the end of helper.js, so you can ensure that help() can be automatically called after helper.js is loaded. Of course, in the end, this is not suitable for your application.
Also note:
1. Because the script tag src 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 with ajax contains script, inserting script in html directly into the dom with innerHTML cannot make the script in html work. I took a rough look at the original code of jQuery().html(html). jQuery also first parses the passed parameters, strips the script code in it, and creates script tags dynamically. The html method used by jQuery is added to the dom html if it contains script, it can be executed. like:
The code copy 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.