often encountered JS dynamic insert scripts in daily development. What is

what JS dynamically inserts scripts?

refers to the absence of the page when the page is loaded, but at some point in the future by modifying the script that is dynamically added by the DOM. It is the same as the operation of the HTML element.

js dynamically inserts scripts in two ways: inserting JavaScript code and inserting external files.

1, directly inserted into the JavaScript code

 < script type= "text/javascript" > function sayHi ();} logically, the following code is valid "); script.type =" text/javascript "; script.appendChild (document.createTextNode (" function sayHi () {alert ('hi');} ")); document.body.appendChild (script); 

is in normal operation. But in IE, it causes errors. IE treats < script> as a special element, DOM is not allowed to access its child nodes. However, you can use the

< script> the text attribute of the element to specify the JavaScript code. Think of the following examples:

 var script = document.creatElement ("script"); The modified code of pre> 

can be run in IE, Firefox, Opera and Safari3.0. The previous version of Safari3.0 does not support text property correctly, but it allows the use of text node technology to specify code. If you need to be compatible with an earlier version of Safari, you can use the following code:

 var script = document.createElement ("script"); script.type = "type/javascript"; VAR code = "function {}";} De;} document.body.appendChild (script) 

here first tries the standard DOM text node method, because all browsers support the way in addition to IE (which causes an error in IE). If this line of code throws an error, then it is IE, so the text property must be used, and the whole process can be represented by the following functions:

 function loadScriptString (code) {var script = document.createElement ("script"); Cument.createTextNode (code));} catch (Ex) {script.text = code;} document.body.appendChild (script);} loadScriptString ("function sayHi () {alert ();}"); Files can run immediately, such as <, script>, and elements below. 

 < script type= "text/javascript" src= "client.js" > < /script> 

to create the node's code as follows. Re>

obviously the DOM here reflects the corresponding HTML code truthfully. However, the last line of code will not download external files before adding <, script>, and elements to the page. You can also add this element to < head> the effect is the same in the element.

, but how do we know that the script file is loaded, because some of our functions need to be executed before the script load is completed.

, after searching for resources on the network, I found that < can be used in IE browsers; script> the onreadystatechange of the element to monitor the change of the load state, and to judge whether the script is loaded by the readyState is loaded or complete. Instead of IE browser, you can use onload to directly determine whether the script is loaded or not.

so a simple implementation process looks like the following:

IE:

 var script = document.createElement ("script"); VAR url = =; YState = = "complete") {alert ("load is successful! }}} script.setAttribute ("SRC", URL); 

Opera, FF, Chrome and so on:

 var script = document.createElement. } script.setAttribute ("SRC", URL); 

can finally merge a function in a JS dynamic insert script;

 function loadScript (URL,) {}; Document.createElement ('script'); script.type ='text/javascript'; script.src = URL; script.onreadystatechange = function () {if (this.readyState = = "loaded") this.readyState = = {= =};} Lor: #ff0000 "> summing up 

above is a method of JS dynamic inserting scripts and inserting external link scripts that are introduced to you. I hope to help you. If you have any questions, please leave a message to me, and the small editor will respond to you in time. Thank you for your support for the script home website.

you may be interested in the article:


This concludes the body part

This paper fixed link:http://www.script-home.com/js-dynamically-inserting-scripts-and-inserting-references-to-external-link-scripts.html | Script Home | +Copy Link

Article reprint please specify:JS dynamically inserting scripts and inserting references to external link scripts | Script Home

You may also be interested in these articles!