Two ways to dynamically load script files_javascript tips

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 , but this script tag is dynamically created using js For example, if we want to dynamically load a callbakc.js, we need such a script tag:

Copy code The code is as follows: The following code is how to create this tag through js (and add it to the head): Copy code 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 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) Copy code 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 , 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: Copy code 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 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: Copy code The code is as follows: jQuery("#content").html( " alert('aa'); ");