動態載入js的方法總結_javascript技巧-js教程-PHP中文網

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

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

複製程式碼程式碼如下:

");

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

複製程式碼程式碼如下:

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

方法三：動態建立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 設定する必要がある

作者最新文章