Key answers to dynamic loading of JS scripts, to the point-JS Tutorial-php.cn

Key answers to dynamic loading of JS scripts, to the point

亚连

Release： 2018-05-17 11:00:58

Original

1698 people have browsed it

Use ajax to develop a website. When using ajax, you need to use a lot of JS code, and not all the code is used on the first loaded page.

So there are a lot of Dynamic loading of JS code is more suitable. Four methods are introduced below. In ajax development, the first method is not suitable. Methods 2, 3, and 4.

is essentially a method, detailed The method of dynamically loading JS is as follows:
1. Directlydocument.write

<scrīpt language="javascrīpt"> 
    document.write("<scrīpt src=&#39;test.js&#39;><//scrīpt>"); 
</scrīpt>

Copy after login

2. Dynamically change the src attribute of an existing scrīpt

<scrīpt src=&#39;&#39; id="s1"></scrīpt> 
<scrīpt language="javascrīpt"> 
    s1.src="test.js" 
</scrīpt>

Copy after login

3. Dynamically create a scrīpt Element

<scrīpt> 
    var oHead = document.
getElementsByTagName
(&#39;HEAD&#39;).item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src="test.js"; 
    oHead.appendChild( oscrīpt); 
</scrīpt>

Copy after login

These three methods are all executed asynchronously, that is to say, while loading these scripts, the scripts on the main page continue to run. If the above method is used, the following code will not be obtained. expected effect.

JS script to be loaded dynamically: a.js, the following is the content of the file.

var str = "中国"; 
alert( "这是a.js中的变量：" + str );

Copy after login

Main page code:

<scrīpt language="Javascrīpt"> 
function LoadJS( id, fileUrl ) 
{ 
    var scrīptTag = document.getElementById( id ); 
    var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
    var oscrīpt= document.createElement("scrīpt"); 
    if ( scrīptTag  ) oHead.removeChild( scrīptTag  ); 
    oscrīpt.id = id; 
    oscrīpt.type = "text/javascrīpt"; 
    oscrīpt.src=fileUrl ; 
    oHead.appendChild( oscrīpt); 
} 
LoadJS( "a.js" ); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</scrīpt>

Copy after login

After the above code is executed, the alert of a.js is executed and a message pops up.

However, an error occurs on the main page and no dialog box pops up. The reason is that 'str' is undefined, why? Because a.js is not fully loaded successfully when the main page retrieves the

of str. When you need to execute a script synchronously, you can use the fourth method below.

4. Principle: Use XMLHTTP to obtain the content of the script, and then create a scrīpt object.
Note: a.js must be saved in UTF8 encoding to avoid errors. Because the server and XML use UTF8 encoding to transmit data.
Main page code:

<scrīpt language="Javascrīpt"> 
function GetHttpRequest() 
{ 
    if ( window.XMLHttpRequest ) // Gecko 
        
return
 new XMLHttpRequest() ; 
    else if ( window.ActiveX
Object
 ) // IE 
        return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
function AjaxPage(sId, url){ 
    var oXmlHttp = GetHttpRequest() ; 
    oXmlHttp.OnReadyStateChange = function()  
    { 
        if ( oXmlHttp.readyState == 4 ) 
        {
            if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) 
            {
                
Include
JS( sId, url, oXmlHttp.responseText );
            } 
            else 
            { 
                alert( &#39;XML request error: &#39; + oXmlHttp.statusText + &#39; (&#39; + oXmlHttp.status + &#39;)&#39; ) ; 
            } 
        } 
    } 
    oXmlHttp.open(&#39;GET&#39;, url, true); 
    oXmlHttp.send(null); 
} 
function IncludeJS(sId, fileUrl, source) 
{ 
    if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
        var oHead = document.getElementsByTagName(&#39;HEAD&#39;).item(0); 
        var oscrīpt = document.createElement( "scrīpt" ); 
        oscrīpt.language = "javascrīpt"; 
        oscrīpt.type = "text/javascrīpt"; 
        oscrīpt.id = sId; 
        oscrīpt.defer = true; 
        oscrīpt.text = source; 
        oHead.appendChild( oscrīpt ); 
    } 
} 
AjaxPage( "scrA", "b.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量：" + str ); 
</scrīpt>

Copy after login

Use ajax to load JS code synchronously. It’s okay to load one, but when there are two, three or more, it’s faster to load asynchronously.

I use the third method. I name each JS. When a JS is loaded, a flag is set to indicate that it has been loaded.

//所有的JS文件   
var jsM = {   
    page         : false  ,   
    dhtmlXTree  : false ,   
    photo_tree  : false    
   };   
function getJSM(f)   
{   
    var reg = ///(/w+)/./;   
    jF = f.match(reg);   
    return jF[jF.length-1];   
}   
function loadJS(js)   
{   
 id = getJSM(js);   
 var scrīptId = document.getElementById(id);   
 var head = document.getElementsByTagName(&#39;head&#39;).item(0);   
 if(scrīptId)   
 {   
  //head.removeChild(id);   
 }   
 else  
 {   
  scrīpt  = document.createElement(&#39;scrīpt&#39;);   
  scrīpt.src = js;   
  scrīpt.type = &#39;text/javascrīpt&#39;;   
  scrīpt.id = id;   
  head.appendChild(scrīpt);   
 }   
}   
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载   
loadJS("page.js")   
[js] view plain copy
//所有的JS文件  
var jsM = {  
page         : false  ,  
dhtmlXTree  : false ,  
photo_tree  : false  
};  
function getJSM(f)  
{  
var reg = ///(/w+)/./;  
jF = f.match(reg);  
return jF[jF.length-1];  
}  
function loadJS(js)  
{  
id = getJSM(js);  
var scrīptId = document.getElementById(id);  
var head = document.getElementsByTagName(&#39;head&#39;).item(0);  
if(scrīptId)  
{  
//head.removeChild(id);  
}  
else  
{  
scrīpt  = document.createElement(&#39;scrīpt&#39;);  
scrīpt.src = js;  
scrīpt.type = &#39;text/javascrīpt&#39;;  
scrīpt.id = id;  
head.appendChild(scrīpt);  
}  
}  
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载  
loadJS("page.js")

Copy after login

The above is the dynamic loading JS script I compiled for everyone. I hope it will be helpful to everyone in the future.

Traverse the values in the EL expression List collection in javascript

How to use <script> The el expression can also be used in the </script> tag

An analysis and solution to the key points of rewriting and polymorphism

The above is the detailed content of Key answers to dynamic loading of JS scripts, to the point. For more information, please follow other related articles on the PHP Chinese website!