This example summarizes the methods of dynamically loading js. Share it for your reference. The details are as follows:
Method 1: Direct document.write (asynchronous)
Copy the code as follows:<script language="javascript">
document.write("<script src='res/extwidget/echarts/xx.js'><//script>");
</script>
Since this method is asynchronous loading, document.write will rewrite the interface, which is obviously not practical
Method 2: Dynamically change the src attribute of existing script (asynchronous)
Copy the code as follows: <script src='' id="xx"></script>
<script language="javascript">
xx.src="test.js"
</script>
This method will not change the interface elements, do not rewrite the interface elements, but will also be loaded asynchronously
Method 3: Dynamically create script elements (asynchronous)
Copy the code as follows:<script>
var body= document.getElementsByTagName('BODY').[0];
var script= document.createElement("script");
script.type = "text/javascript";
script.src="xx.js";
body.appendChild( oScript);
</script>
Compared with the second method, the advantage of this method is that it does not require writing a script tag on the interface at the beginning. The disadvantage is asynchronous loading
Method 4: XMLHttpRequest/ActiveXObject Loading (asynchronous)
Copy the code as follows:/**
* Asynchronous loading of js scripts
* @param id The id of the <script> tag that needs to be set
* @param url relative or absolute path to js file
*/
loadJs:function(id,url){
var xmlHttp = null;
if(window.ActiveXObject){//IE
try {
// Can be used in IE6 and later versions
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//IE5.5 and later versions can be used
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}else if(window.XMLHttpRequest){
//Firefox, Opera 8.0+, Safari, Chrome
xmlHttp = new XMLHttpRequest();
}
//Use synchronous loading
xmlHttp.open("GET",url,false);
//Send synchronization request,
//If the browser is Chrome or Opera, it must be published before it can run, otherwise an error will be reported
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
//4 means that the data has been sent
if( xmlHttp.readyState == 4 ){
//0 is the accessed local area, 200 to 300 means the access to the server is successful.
//304 means that the access is cache without modification
if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){
var myBody = document.getElementsByTagName("BODY")[0];
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = id;
try{
//IE8 and the following do not support this method, and need to be set through the text attribute
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}catch (ex){
myScript.text = xmlHttp.responseText;
}
myBody.appendChild(myScript);
}
}
}
//Used asynchronous loading
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
Setting to false in open means synchronous loading. Synchronous loading does not require setting onreadystatechange event
These four methods are executed asynchronously, that is, while loading these scripts, the script on the main page continues to run.
Method 5: XMLHttpRequest/ActiveXObject Loading (Synchronous)
Copy the code as follows:/**
* Synchronous loading of js scripts
* @param id The id of the <script> tag that needs to be set
* @param url relative or absolute path to js file
* @return {Boolean} Returns whether it loads successfully, true means success, false means failure
*/
loadJs:function(id,url){
var xmlHttp = null;
if(window.ActiveXObject){//IE
try {
// Can be used in IE6 and later versions
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//IE5.5 and later versions can be used
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}else if(window.XMLHttpRequest){
//Firefox, Opera 8.0+, Safari, Chrome
xmlHttp = new XMLHttpRequest();
}
//Use synchronous loading
xmlHttp.open("GET",url,false);
//Send a synchronization request. If the browser is Chrome or Opera, it must be published before it can run, otherwise an error will be reported
xmlHttp.send(null);
//4 means that the data has been sent
if( xmlHttp.readyState == 4 ){
//0 is the accessed local area. 200 to 300 means the access to the server is successful, and 304 means that the accessed cache is not made.
if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){
var myBody = document.getElementsByTagName("BODY")[0];
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = id;
try{
//IE8 and the following do not support this method, and need to be set through the text attribute
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}catch (ex){
myScript.text = xmlHttp.responseText;
}
myBody.appendChild(myScript);
return true;
}else{
return false;
}
}else{
return false;
}
}
I hope this article will be helpful to everyone's JavaScript programming.