Home  >  Article  >  Web Front-end  >  Summary of three ways to dynamically load JS files

Summary of three ways to dynamically load JS files

php中世界最好的语言
php中世界最好的语言Original
2018-05-12 14:35:412113browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn