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!