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>");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)
