動(dòng)態(tài)加載js文件
有時(shí)候我們需要根據(jù)參數(shù)不同來(lái)引入不同的js文件,用html直接寫(xiě)標(biāo)簽滿足不了我們的需求,總結(jié)幾種方法,以及同步異步加載的各種需求
一.直接加載
<div id="divId"></div><script>
二.異步加載,并發(fā)執(zhí)行,但引入js內(nèi)容不能直接使用
//1.1 直接document.write document.write("<script src='test.js'><//script>"); //1.2 動(dòng)態(tài)改變已有script的src屬性 //頁(yè)面中有<script src='' id="s1"></ script> document.getElementById('s1').src="test.js"; //1.3 動(dòng)態(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方法中有一個(gè)方法function test(){alert("test");} rootObject.appendChild(oScript); //2.0 調(diào)用js test();//在ie中不會(huì)出錯(cuò),在firefox會(huì)出錯(cuò),因?yàn)閒irefox默認(rèn)為異步加載(在向服務(wù)器請(qǐng)求加載test.js文件的同時(shí),繼續(xù)向下執(zhí)行了,調(diào)用test()方法,就自然找不到這個(gè)方法)
三.同步加載,單步加載,引入js內(nèi)容可以直接使用
var Skip={};//獲取XMLHttpRequest對(duì)象(提供客戶端同http服務(wù)器通訊的協(xié)議)Skip.getXmlHttpRequest=function (){ if ( window.XMLHttpRequest ) // 除了IE外的其它瀏覽器 return new XMLHttpRequest() ; else if ( window.ActiveXObject ) // IE return new ActiveXObject("MsXml2.XmlHttp") ; },//導(dǎo)入內(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); } },//導(dǎo)入文件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(){//其實(shí)當(dāng)在第二次調(diào)用導(dǎo)入js時(shí),因?yàn)樵跒g覽器當(dāng)中存在這個(gè)*.js文件了,它就不在訪問(wèn)服務(wù)器,也就不在執(zhí)行這個(gè)方法了,這個(gè)方法也只有設(shè)置成異步時(shí)才用到if ( oXmlHttp.readyState == 4 ){ //當(dāng)執(zhí)行完成以后(返回了響應(yīng))所要執(zhí)行的 if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有讀取對(duì)應(yīng)的url文件,404表示不存在這個(gè)文件 Skip.includeJsSrc( rootObject, url); } else{ alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ; } } } //1.True 表示腳本會(huì)在 send() 方法之后繼續(xù)執(zhí)行,而不等待來(lái)自服務(wù)器的響應(yīng),并且在open()方法當(dāng)中有調(diào)用到onreadystatechange()這個(gè)方法。通過(guò)把該參數(shù)設(shè)置為 "false",可以省去額外的 onreadystatechange 代碼,它表示服務(wù)器返回響應(yīng)后才執(zhí)行send()后面的方法.//2.同步執(zhí)行oXmlHttp.send()方法后oXmlHttp.responseText有返回對(duì)應(yīng)的內(nèi)容,而異步還是為空,只有在oXmlHttp.readyState == 4時(shí)才有內(nèi)容,反正同步的在oXmlHttp.send()后的操作就相當(dāng)于oXmlHttp.readyState == 4下的操作,它相當(dāng)于只有了這一種狀態(tài).oXmlHttp.open('GET', url, false); //url為js文件時(shí),ie會(huì)自動(dòng)生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不會(huì) 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)用也不會(huì)出錯(cuò)了.</script>
總結(jié):
1. ie動(dòng)態(tài)加載js文件時(shí),它默認(rèn)就為同步,可以不用設(shè)置同步(也可直調(diào)用Skip.includeJsSrc())
2. ff動(dòng)態(tài)加載js文件時(shí),它默認(rèn)為異步,要設(shè)置成同步,加載完直接調(diào)用才不會(huì)出錯(cuò)
3. 無(wú)論ie還是ff在動(dòng)態(tài)加載js內(nèi)容時(shí),沒(méi)有請(qǐng)求服務(wù)器,不會(huì)存在異步問(wèn)題
注:無(wú)論ie還是ff在頁(yè)面加載js時(shí)(即執(zhí)行整個(gè)頁(yè)面),都是為同步的加載,除非設(shè)置script的屬性defer="true"(此屬性好像也只是對(duì)ie有效)
以上就是小編為大家?guī)?lái)的同步異步動(dòng)態(tài)引入js文件的幾種方法總結(jié)的全部?jī)?nèi)容了,希望對(duì)大家有所幫助,多多支持武林網(wǎng)~
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注