How to implement JS dynamic insertion of scripts and insertion of referenced external link scripts-JS Tutorial-php.cn

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"); } Copy after login 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); Copy after login 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); Copy after login 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.

Copy after login 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); Copy after login 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); Copy after login 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); Copy after login Finally You can merge a js dynamically inserted script function;

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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