同步異步動態(tài)引入js文件的幾種方法總結(jié)
動態(tài)加載js文件
有時候我們需要根據(jù)參數(shù)不同來引入不同的js文件,用html直接寫標簽滿足不了我們的需求,總結(jié)幾種方法,以及同步異步加載的各種需求
一.直接加載
<div id="divId"></div> <script>
二.異步加載,并發(fā)執(zhí)行,但引入js內(nèi)容不能直接使用
//1.1 直接document.write
document.write("<script src='test.js'><\/script>");
//1.2 動態(tài)改變已有script的src屬性
//頁面中有<script src='' id="s1"></ script>
document.getElementById('s1').src="test.js";
//1.3 動態(tài)創(chuàng)建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 調(diào)用js
test();//在ie中不會出錯,在firefox會出錯,因為firefox默認為異步加載(在向服務(wù)器請求加載test.js文件的同時,繼續(xù)向下執(zhí)行了,調(diào)用test()方法,就自然找不到這個方法)
三.同步加載,單步加載,引入js內(nèi)容可以直接使用
var Skip={};
//獲取XMLHttpRequest對象(提供客戶端同http服務(wù)器通訊的協(xié)議)
Skip.getXmlHttpRequest=function (){
if ( window.XMLHttpRequest ) // 除了IE外的其它瀏覽器
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
},
//導入內(nèi)容
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(){//其實當在第二次調(diào)用導入js時,因為在瀏覽器當中存在這個*.js文件了,它就不在訪問服務(wù)器,也就不在執(zhí)行這個方法了,這個方法也只有設(shè)置成異步時才用到
if ( oXmlHttp.readyState == 4 ){ //當執(zhí)行完成以后(返回了響應(yīng))所要執(zhí)行的
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有讀取對應(yīng)的url文件,404表示不存在這個文件
Skip.includeJsSrc( rootObject, url);
} else{
alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
}
}
}
//1.True 表示腳本會在 send() 方法之后繼續(xù)執(zhí)行,而不等待來自服務(wù)器的響應(yīng),并且在open()方法當中有調(diào)用到onreadystatechange()這個方法。通過把該參數(shù)設(shè)置為 "false",可以省去額外的 onreadystatechange 代碼,它表示服務(wù)器返回響應(yīng)后才執(zhí)行send()后面的方法.
//2.同步執(zhí)行oXmlHttp.send()方法后oXmlHttp.responseText有返回對應(yīng)的內(nèi)容,而異步還是為空,只有在oXmlHttp.readyState == 4時才有內(nèi)容,反正同步的在oXmlHttp.send()后的操作就相當于oXmlHttp.readyState == 4下的操作,它相當于只有了這一種狀態(tài).
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();//即使馬上調(diào)用也不會出錯了.
</script>
總結(jié):
1. ie動態(tài)加載js文件時,它默認就為同步,可以不用設(shè)置同步(也可直調(diào)用Skip.includeJsSrc())
2. ff動態(tài)加載js文件時,它默認為異步,要設(shè)置成同步,加載完直接調(diào)用才不會出錯
3. 無論ie還是ff在動態(tài)加載js內(nèi)容時,沒有請求服務(wù)器,不會存在異步問題
注:無論ie還是ff在頁面加載js時(即執(zhí)行整個頁面),都是為同步的加載,除非設(shè)置script的屬性defer="true"(此屬性好像也只是對ie有效)
以上就是小編為大家?guī)淼耐疆惒絼討B(tài)引入js文件的幾種方法總結(jié)的全部內(nèi)容了,希望對大家有所幫助,多多支持腳本之家~
相關(guān)文章
input+select(multiple) 實現(xiàn)下拉框輸入值
昨天做一個網(wǎng)站時,需要實現(xiàn)下拉框能夠輸入,從功能上講是要實現(xiàn)用戶在文本框輸入值時,能夠從后讀出數(shù)據(jù)彈出下拉選項2009-05-05
js監(jiān)聽滾動條滾動事件使得某個標簽內(nèi)容始終位于同一位置
js如何監(jiān)聽滾動條滾動事件,使得某個標簽內(nèi)容始終位于同一位置,下面有個不錯的示例,大家可以參考下2014-01-01
javascript算法解數(shù)獨實現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨實現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08

