How to implement JS dynamic insertion of scripts and insertion of referenced external link scripts

This time I will show you how to dynamically insert JS scripts and insert referenced external link scripts, and how to implement JS dynamically insert scripts and insert referenced external link scripts. What are the precautions? . Here are practical cases. Let’s take a look.

What is a js dynamically inserted script?

refers to a script that does not exist when the page is loaded, but can be modified at some point in the future. DOM dynamically added script. Same as working with HTML elements.

js There are also two ways to dynamically insert scripts: inserting JavaScript code and inserting external files.

1. Directly insert javascript code

function sayHi() { alert("hi"); } Logically speaking, the following DOM code is valid:

var script = document.createElement("script"); script.type = "text/javascript"; script.appendChild(document.createTextNode("function sayHi() {alert('hi');}")); document.body.appendChild(script); These DOM codes run normally in Firefox, Safari, Chrome and Opera. But in IE, it causes an error. IE treats as a special element and does not allow DOM access to its children. However, you can use the text attribute of the

element to specify JavaScript code, as in the following example:

var script = document.creatElement("script"); script.type = "text/javascript"; script.text = "function sayHi() {alert('hi');}"; document.body.appendChild(script); The modified code can be used in IE, Firefox, Opera and Safari3 Running in .0. Although versions prior to Safari 3.0 do not correctly support the text attribute, they do allow the use of text node technology to specify code. If you need to be compatible with earlier versions of Safari, you can use the following code:

External JavaScript files that are dynamically loaded can be run immediately, such as the element below.

The DOM code to create this node is as follows:

var script = document.createElement("script"); script.type = "text/javascript"; script.src = "client.js"; document.body.appendChild(script); Obviously the DOM here faithfully reflects the corresponding HTML code. However, the external file will not be downloaded until the last line of code is executed to add the element to the page. This element can also be added to the element to achieve the same effect.

But how do you know that the script file is loaded, because some of our functions need to be executed after the script is loaded and takes effect.

After searching for resources on the Internet, I found that you can use the onreadystatechange of the element in the IE browser to monitor the change of the loading state, and judge the script by judging whether its readyState is loaded or complete. Whether the loading is completed. Non-IE browsers can use onload to directly determine whether the script is loaded.

So a simple implementation process looks like this:

Under IE:

var script = document.createElement("script"); var url = 'http:'; script.setAttribute("type","text/javascript"); script.onreadystatechange = function() { if(this.readyState == "loaded" || this.readyState == "complete"){ alert("加载成功啦！"); } } script.setAttribute("src", url); Opera, FF, Chrome, etc.:

var script = document.createElement("script"); var url = 'http'; script.setAttribute("type","text/javascript"); script.onload = function() { alert("加载成功啦！"); } script.setAttribute("src",url); Finally You can merge a js dynamically inserted script function;