動態載入js的方法總結_javascript技巧

本文實例匯總了動態載入js的方法。分享給大家供大家參考。具體如下：

方法一：直接document.write（非同步）

複製程式碼 程式碼如下:

");

由於這種方式是非同步加載，document.write會重寫介面，明顯不實用
方法二：動態改變已有script的src屬性（非同步）

複製程式碼 程式碼如下:

  

此種方法不會改變介面元素，不重寫介面元素，但同樣是非同步載入

方法三：動態建立script元素（非同步）

複製程式碼 程式碼如下:

<script><div class="codebody" id="code52191">     var body= document.getElementsByTagName('BODY').[0];   <br />     var script= document.createElement("script");   <br />     script.type = "text/javascript";   <br />     script.src="xx.js";   <br />     身體.appendChild( oScript);   <br /> </script>
此辦法的優勢相對於第二種而言就是不需要最開始就在介面寫一個script標籤，缺點還是非同步載入

方法四：XMLHttpRequest/ActiveXObject載入（非同步）

複製程式碼 程式碼如下:

/**
* 非同步載入js腳本
* @param id   需要設定的<script>標籤的id <br /> * @param url   js檔案的相對路徑或絕對路徑 <br />*/  <br /> loadJs:function(id,url){  <br />         <br /> var  xmlHttp = null;  <br /> if(window.ActiveXObject){//IE  <br />   try {  <br />       //IE6以及以後版本可以使用  <br />       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  <br />   } catch (e) {  <br />       //IE5.5及以後版本可使用  <br />       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  <br />   }  <br /> }else if(window.XMLHttpRequest){  <br />   //Firefox，Opera 8.0 ，Safari，Chrome  <br />   xmlHttp = new XMLHttpRequest();  <br /> }  <br /> //採用同步載入  <br /> xmlHttp.open("GET",url,false);  <br /> //發送同步請求，<br /> //若瀏覽器為Chrome或Opera，必須發佈後才能執行，不然會報錯  <br /> xmlHttp.send(null);  <br /> xmlHttp.onreadystatechange = function(){  <br />   //4代表資料傳送完畢  <br />   if( xmlHttp.readyState == 4 ){  <br />       //0為存取的本地，200到300代表存取伺服器成功，<br />       //304代表沒做修改存取的是快取  <br />       if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){  <br />    var myBody = document.getElementsByTagName("BODY")[0];  <br />    var myScript = document.createElement( "script" );  <br />    myScript.language = "javascript";  <br />    myScript.type = "text/javascript";  <br />    myScript.id = id;  <br />    try{  <br />        //IE8以及以下不支援此方式，需要透過text屬性來設定  <br />        myScript.appendChild(document.createTextNode(xmlHttp.responseText));  <br />    }catch (ex){  <br />        myScript.text = xmlHttp.responseText;  <br />    }  <br />    myBody.appendChild(myScript);  <br />       }  <br />   }  <br /> }  <br /> //採用非同步載入  <br /> xmlHttp.open("GET",url,true);  <br /> xmlHttp.send(null);  <br /> }</script>

open裡面設定為false就是同步載入了，同步載入不需要設定onreadystatechange事件

這四種方法都是非同步執行的，也就是說，在載入這些腳本的同時，主頁面的腳本繼續運作。

方法五：XMLHttpRequest/ActiveXObject載入（同步）

複製程式碼 程式碼如下:

/**
* js スクリプトを同期的にロード
* @param id 設定する必要がある