動(dòng)態(tài)加載js的方法匯總

更新時(shí)間：2015年02月13日 09:57:51 作者：尹若軒

這篇文章主要介紹了動(dòng)態(tài)加載js的方法,實(shí)例匯總了常見的幾種動(dòng)態(tài)加載技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例匯總了動(dòng)態(tài)加載js的方法。分享給大家供大家參考。具體如下：

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

<script language="javascript">   

    document.write("<script src='res/extwidget/echarts/xx.js'><\/script>");

</script>

由于這種方式是異步加載，document.write會(huì)重寫界面，明顯不實(shí)用
方法二：動(dòng)態(tài)改變已有script的src屬性（異步）

復(fù)制代碼代碼如下:

<script src='' id="xx"></script>   

<script language="javascript">   

    xx.src="test.js"   

</script>

此種方法不會(huì)改變界面元素，不重寫界面元素，但同樣是異步加載
方法三：動(dòng)態(tài)創(chuàng)建script元素（異步）

復(fù)制代碼代碼如下:

<script>

    var body= document.getElementsByTagName('BODY').[0];   

    var script= document.createElement("script");   

    script.type = "text/javascript";   

    script.src="xx.js";   

    body.appendChild( oScript);   

</script>

此辦法的優(yōu)勢(shì)相對(duì)于第二種而言就是不需要最開始就在界面寫一個(gè)script標(biāo)簽，缺點(diǎn)還是異步加載

方法四：XMLHttpRequest/ActiveXObject加載（異步）

復(fù)制代碼代碼如下:

/** 

* 異步加載js腳本 

* @param id   需要設(shè)置的<script>標(biāo)簽的id 

* @param url   js文件的相對(duì)路徑或絕對(duì)路徑 

*/  

loadJs:function(id,url){  

var  xmlHttp = null;  

if(window.ActiveXObject){//IE  

  try {  

      //IE6以及以后版本中可以使用  

      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  

  } catch (e) {  

      //IE5.5以及以后版本可以使用  

      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

  }  

}else if(window.XMLHttpRequest){  

  //Firefox，Opera 8.0+，Safari，Chrome  

  xmlHttp = new XMLHttpRequest();  

}  

//采用同步加載  

xmlHttp.open("GET",url,false);  

//發(fā)送同步請(qǐng)求，

//如果瀏覽器為Chrome或Opera，必須發(fā)布后才能運(yùn)行，不然會(huì)報(bào)錯(cuò)  

xmlHttp.send(null);  

xmlHttp.onreadystatechange = function(){  

  //4代表數(shù)據(jù)發(fā)送完畢  

  if( xmlHttp.readyState == 4 ){  

      //0為訪問的本地，200到300代表訪問服務(wù)器成功，

      //304代表沒做修改訪問的是緩存  

      if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){  

   var myBody = document.getElementsByTagName("BODY")[0];  

   var myScript = document.createElement( "script" );  

   myScript.language = "javascript";  

   myScript.type = "text/javascript";  

   myScript.id = id;  

   try{  

       //IE8以及以下不支持這種方式，需要通過text屬性來設(shè)置  

       myScript.appendChild(document.createTextNode(xmlHttp.responseText));  

   }catch (ex){  

       myScript.text = xmlHttp.responseText;  

   }  

   myBody.appendChild(myScript);  

      }  

  }  

}  

//采用異步加載  

xmlHttp.open("GET",url,true);  

xmlHttp.send(null);  

}

open里面設(shè)置為false就是同步加載了，同步加載不需要設(shè)置onreadystatechange事件

這四種方法都是異步執(zhí)行的，也就是說，在加載這些腳本的同時(shí)，主頁(yè)面的腳本繼續(xù)運(yùn)行。

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

復(fù)制代碼代碼如下:

/** 

* 同步加載js腳本 

* @param id   需要設(shè)置的<script>標(biāo)簽的id 

* @param url   js文件的相對(duì)路徑或絕對(duì)路徑 

* @return {Boolean}   返回是否加載成功，true代表成功，false代表失敗 

*/  

loadJs:function(id,url){  

  var  xmlHttp = null;  

  if(window.ActiveXObject){//IE  

      try {  

   //IE6以及以后版本中可以使用  

   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  

      } catch (e) {  

   //IE5.5以及以后版本可以使用  

   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  

      }  

  }else if(window.XMLHttpRequest){  

      //Firefox，Opera 8.0+，Safari，Chrome  

      xmlHttp = new XMLHttpRequest();  

  }  

  //采用同步加載  

  xmlHttp.open("GET",url,false);  

  //發(fā)送同步請(qǐng)求，如果瀏覽器為Chrome或Opera，必須發(fā)布后才能運(yùn)行，不然會(huì)報(bào)錯(cuò)  

  xmlHttp.send(null);  

  //4代表數(shù)據(jù)發(fā)送完畢  

  if( xmlHttp.readyState == 4 ){  

      //0為訪問的本地，200到300代表訪問服務(wù)器成功，304代表沒做修改訪問的是緩存  

      if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304){  

   var myBody = document.getElementsByTagName("BODY")[0];  

   var myScript = document.createElement( "script" );  

   myScript.language = "javascript";  

   myScript.type = "text/javascript";  

   myScript.id = id;  

   try{  

       //IE8以及以下不支持這種方式，需要通過text屬性來設(shè)置  

       myScript.appendChild(document.createTextNode(xmlHttp.responseText));  

   }catch (ex){  

       myScript.text = xmlHttp.responseText;  

   }  

   myBody.appendChild(myScript);  

   return true;  

      }else{  

   return false;  

      }  

  }else{  

      return false;  

  }  

}