This time I will bring you three ways to dynamically load JS files. What are theprecautions for dynamically loading JS files? The following is a practical case, let's take a look.
1. Usedocument.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("");
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 scriptfunction 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'); });
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
