Summary of three ways to dynamically load JS files

This time I will bring you a summary of the three ways to dynamically load JS files. What are the precautions when using the three ways to dynamically load 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.

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

What needs to be noted is the escaping of 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');
 });

You can also use the same principle to dynamically load css files, except that the inserted parent node is head Label.

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

Recommended reading:

Detailed explanation of Vue.js calculation and use of listener properties

Loading jquery.js in JS Detailed explanation of method

The above is the detailed content of Summary of three ways to dynamically load JS files. For more information, please follow other related articles on the PHP Chinese website!