Summary of methods for dynamically loading JS files

This time I will bring you a summary of the method of dynamically loading JS files. What are the precautions for dynamically loading JS files? The following is a practical case, let's take a look.

1. Use the document.write/writeln() method

This method can realize the dynamic loading of js files. The principle is to re-load the js file. Write document flow, this method will cause the entire page to be redrawn.

Implementation method:

Copy code The code is as follows:

document.writeln("");

What you need to pay attention to is the escaping of the special characters.

2. Use jQuery

Use getScript(url,callback) method to dynamically load js files

$.getScript('test.js',function(){
 alert('done');
});

3. Use native js Method

Principle: Dynamically create a script tag and specify the src attribute of the script

function loadJs(url,callback){
 var script=document.createElement('script');
 script.type="text/javascript";
 if(typeof(callback)!="undefined"){
 if(script.readyState){
 script.onreadystatechange=function(){
  if(script.readyState == "loaded" || script.readyState == "complete"){
  script.onreadystatechange=null;
  callback();
  }
 }
 }else{
 script.onload=function(){
  callback();
 }
 }
 }
 script.src=url;
 document.body.appendChild(script);
 }
 loadJs("test.js",function(){
 alert('done');
 });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Recommended reading:

What to do if the ip cannot be accessed when webpack myproject builds the project

This points to call and apply Using

webpack vue project development environment LAN binding IP method

The above is the detailed content of Summary of methods for dynamically loading JS files. For more information, please follow other related articles on the PHP Chinese website!