重點解答動態載入JS腳本，一語道破

用ajax開發網站，用ajax的時候，需要用到大量的JS程式碼，而並且是所有的程式碼都是要第一個載入的頁面要用到，

所以很多的JS程式碼動態載入比較合適，以下介紹了四種方法，在ajax開發中，第一種方法不合適，2，3，4方法，

本質上是一張方法，詳細地的動態載入JS方法如下：
1、直接document.write

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

2、動態改變已有scrīpt的src屬性

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

3、動態建立scrīpt元素

<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>

　　這三種方法都是非同步執行的，也就是說，在載入這些腳本的同時，主頁面的腳本繼續運行，如果用以上的方法，那麼下面的程式碼將不會得到預期的效果。

要動態載入的JS腳本：a.js，以下是該檔案的內容。

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

主頁代碼：

<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>

上述程式碼執行後 a.js 的 alert 執行並彈出訊息，
 
但是 主頁產生了錯誤，沒有彈出對話框。原因是 'str' 未定義，為什麼呢？因為主頁面在取 str 的

時候 a.js 並沒有完全載入成功。遇到需要同步執行腳本的時候，可以用下面的第四種方法。

4、原理：用XMLHTTP取得要腳本的內容，再建立 scrīpt 物件。
注意：a.js必須用UTF8編碼保存，要不會出錯。因為伺服器與XML使用UTF8編碼傳送資料。
主頁碼：

<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>

用ajax同步載入JS程式碼，載入一個還好，兩三個或更多的時候，還是用非同步載入比較快。

我使用第三種方法，每個JS我都為其命名，當某個JS載入完成後，則置一個代表其已經載入完成的標誌。

//所有的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('head').item(0);   
 if(scrīptId)   
 {   
  //head.removeChild(id);   
 }   
 else  
 {   
  scrīpt  = document.createElement('scrīpt');   
  scrīpt.src = js;   
  scrīpt.type = 'text/javascrīpt';   
  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('head').item(0);  
if(scrīptId)  
{  
//head.removeChild(id);  
}  
else  
{  
scrīpt  = document.createElement('scrīpt');  
scrīpt.src = js;  
scrīpt.type = 'text/javascrīpt';  
scrīpt.id = id;  
head.appendChild(scrīpt);  
}  
}  
//JS时候，判断jsM中，代表其模块的标识是否为true，如果为false，则尚未加载  
loadJS("page.js")

上面是我整理給大家的動態載入JS腳本，希望今後會對大家有幫助。

相關文章：

javascript遍歷EL表達式List集合中的值

如何在<script> </script>標籤中一樣可以使用el表達式

重寫與多態的要點分析解

###################################################################

以上是重點解答動態載入JS腳本，一語道破的詳細內容。更多資訊請關注PHP中文網其他相關文章！