Home > Web Front-end > JS Tutorial > body text

3 ways to dynamically load JS files

php中世界最好的语言
Release: 2018-05-23 15:01:19
Original
1558 people have browsed it

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>");
Copy after login

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(&#39;test.js&#39;,function(){
 alert(&#39;done&#39;);
});
Copy after login

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(&#39;script&#39;);
 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(&#39;done&#39;);
 });
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template