3 ways to dynamically load JS files

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

1. Use document.write/writeln() method

This method can realize 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:

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:

How to dynamically introduce JS files

Summary of how to use data-* attributes in H5

How to implement JS synchronization, asynchronous and delayed loading

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