本文實例匯總了動態加載js的方法。分享給大家供大家參考。具體如下：
方法一：直接document.write（異步）
複製代碼代碼如下:<script language="javascript">
document.write("<script src='res/extwidget/echarts/xx.js'><//script>");
</script>
由於這種方式是異步加載，document.write會重寫界面，明顯不實用
方法二：動態改變已有script的src屬性（異步）
複製代碼代碼如下:<script src='' id="xx"></script>
<script language="javascript">
xx.src="test.js"
</script>
此種方法不會改變界面元素，不重寫界面元素，但同樣是異步加載
方法三：動態創建script元素（異步）
複製代碼代碼如下:<script>
var body= document.getElementsByTagName('BODY').[0];
var script= document.createElement("script");
script.type = "text/javascript";
script.src="xx.js";
body.appendChild( oScript);
</script>
此辦法的優勢相對於第二種而言就是不需要最開始就在界面寫一個script標籤，缺點還是異步加載
方法四：XMLHttpRequest/ActiveXObject加載（異步）
複製代碼代碼如下:/**
* 異步加載js腳本
* @param id 需要設置的<script>標籤的id
* @param url js文件的相對路徑或絕對路徑
*/
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);
//發送同步請求，
//如果瀏覽器為Chrome或Opera，必鬚髮布後才能運行，不然會報錯
xmlHttp.send(null);
xmlHttp.onreadystatechange = function(){
//4代表數據發送完畢
if( xmlHttp.readyState == 4 ){
//0為訪問的本地，200到300代表訪問服務器成功，
//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屬性來設置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}catch (ex){
myScript.text = xmlHttp.responseText;
}
myBody.appendChild(myScript);
}
}
}
//採用異步加載
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
open裡面設置為false就是同步加載了，同步加載不需要設置onreadystatechange事件
這四種方法都是異步執行的，也就是說，在加載這些腳本的同時，主頁面的腳本繼續運行。
方法五：XMLHttpRequest/ActiveXObject加載（同步）
複製代碼代碼如下:/**
* 同步加載js腳本
* @param id 需要設置的<script>標籤的id
* @param url js文件的相對路徑或絕對路徑
* @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);
//發送同步請求，如果瀏覽器為Chrome或Opera，必鬚髮布後才能運行，不然會報錯
xmlHttp.send(null);
//4代表數據發送完畢
if( xmlHttp.readyState == 4 ){
//0為訪問的本地，200到300代表訪問服務器成功，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屬性來設置
myScript.appendChild(document.createTextNode(xmlHttp.responseText));
}catch (ex){
myScript.text = xmlHttp.responseText;
}
myBody.appendChild(myScript);
return true;
}else{
return false;
}
}else{
return false;
}
}
希望本文所述對大家的javascript程序設計有所幫助。