動態加載js文件
有時候我們需要根據參數不同來引入不同的js文件，用html直接寫標簽滿足不了我們的需求，總結幾種方法，以及同步異步加載的各種需求
一.直接加載
<div id="divId"></div> <script>
二.異步加載，並發執行，但引入js內容不能直接使用
//1.1 直接document.write
document.write("<script src='test.js'><\/script>");
//1.2 動態改變已有script的src屬性
//頁面中有<script src='' id="s1"></ script>
document.getElementById('s1').src="test.js";
//1.3 動態創建js
var rootObject=document.getElementById("divId");
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
oScript.src = test.js; //test.js方法中有一個方法function test(){alert("test");}
rootObject.appendChild(oScript);
//2.0 調用js
test();//在ie中不會出錯,在firefox會出錯,因為firefox默認為異步加載(在向服務器請求加載test.js文件的同時,繼續向下執行了,調用test()方法,就自然找不到這個方法)
三.同步加載，單步加載，引入js內容可以直接使用
var Skip={};
//獲取XMLHttpRequest對象(提供客戶端同http服務器通訊的協議)
Skip.getXmlHttpRequest=function (){
if ( window.XMLHttpRequest ) // 除了IE外的其它浏覽器
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
},
//導入內容
Skip.includeJsText =function (rootObject,jsText){
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
//oScript.id = sId;
//oScript.src = fileUrl;
//oScript.defer = true;
oScript.text = jsText;
rootObject.appendChild(oScript);
//alert(oScript.text);
}
},
//導入文件
Skip.includeJsSrc =function (rootObject, fileUrl){
if ( rootObject != null ){
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
oScript.src = fileUrl;
rootObject.appendChild(oScript);
}
},
//同步加載
Skip.addJs=function(rootObject, url){
var oXmlHttp = Skip.getXmlHttpRequest() ;
oXmlHttp.onreadystatechange = function(){//其實當在第二次調用導入js時,因為在浏覽器當中存在這個*.js文件了,它就不在訪問服務器,也就不在執行這個方法了,這個方法也只有設置成異步時才用到
if ( oXmlHttp.readyState == 4 ){ //當執行完成以後(返回了響應)所要執行的
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有讀取對應的url文件,404表示不存在這個文件
Skip.includeJsSrc( rootObject, url);
} else{
alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
}
}
}
//1.True 表示腳本會在 send() 方法之後繼續執行，而不等待來自服務器的響應,並且在open()方法當中有調用到onreadystatechange()這個方法。通過把該參數設置為 "false"，可以省去額外的 onreadystatechange 代碼,它表示服務器返回響應後才執行send()後面的方法.
//2.同步執行oXmlHttp.send()方法後oXmlHttp.responseText有返回對應的內容,而異步還是為空,只有在oXmlHttp.readyState == 4時才有內容,反正同步的在oXmlHttp.send()後的操作就相當於oXmlHttp.readyState == 4下的操作,它相當於只有了這一種狀態.
oXmlHttp.open('GET', url, false); //url為js文件時,ie會自動生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不會
oXmlHttp.send(null);
Skip.includeJsText(rootObject,oXmlHttp.responseText);
}
};
var rootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
test();//即使馬上調用也不會出錯了.
</script>
總結：
1. ie動態加載js文件時,它默認就為同步,可以不用設置同步(也可直調用Skip.includeJsSrc())
2. ff動態加載js文件時,它默認為異步,要設置成同步,加載完直接調用才不會出錯
3. 無論ie還是ff在動態加載js內容時,沒有請求服務器,不會存在異步問題
注:無論ie還是ff在頁面加載js時(即執行整個頁面),都是為同步的加載,除非設置script的屬性defer="true"(此屬性好像也只是對ie有效)
以上就是小編為大家帶來的同步異步動態引入js文件的幾種方法總結的全部內容了，希望對大家有所幫助，多多支持~