動態(tài)加載JavaScript文件的3種方式
以下是遇到的幾種動態(tài)加載JavaScript文件的方式,持續(xù)更新中。。。
一、使用document.write/writeln()方式
該種方式可以實(shí)現(xiàn)js文件的動態(tài)加載,原理就是在重寫文檔流,這種方式會導(dǎo)致整個(gè)頁面重繪。
實(shí)現(xiàn)方式:
需要注意的是特殊字符的轉(zhuǎn)義。
二、使用jQuery
使用getScript(url,callback)方法實(shí)現(xiàn)動態(tài)加載js文件
$.getScript('test.js',function(){ alert('done'); });
三、使用原生js方法
原理:動態(tài)創(chuàng)建script標(biāo)簽,并指定script的src屬性
function loadJs(url,callback){ var script=document.createElement('script'); script.type="text/javascript"; if(typeof(callback)!="undefined"){ if(script.readyState){ script.onreadystatechange=function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange=null; callback(); } } }else{ script.onload=function(){ callback(); } } } script.src=url; document.body.appendChild(script); } loadJs("test.js",function(){ alert('done'); });
還可以使用同樣的原理動態(tài)加載css文件,只不過插入的的父節(jié)點(diǎn)是head標(biāo)簽。
以上就是動態(tài)加載JavaScript文件的方法,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
javascript事件的綁定基礎(chǔ)實(shí)例講解(34)
這篇文章主要為大家詳細(xì)介紹了javascript事件的綁定基礎(chǔ)實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02javascript實(shí)現(xiàn)數(shù)獨(dú)解法
數(shù)獨(dú)(すうどく,Sūdoku)是一種運(yùn)用紙、筆進(jìn)行演算的邏輯游戲。玩家需要根據(jù)9×9盤面上的已知數(shù)字,推理出所有剩余空格的數(shù)字,并滿足每一行、每一列、每一個(gè)粗線宮內(nèi)的數(shù)字均含1-9,不重復(fù)。2015-03-03javascript判斷一個(gè)變量是數(shù)組還是對象
這篇文章主要介紹了javascript判斷一個(gè)變量是數(shù)組還是對象,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04中級前端工程師必須要掌握的27個(gè)JavaScript 技巧(干貨總結(jié))
這篇文章主要介紹了中級前端工程師必須要掌握的27個(gè)JavaScript 技巧(干貨總結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-09-09Firefox outerHTML實(shí)現(xiàn)代碼
firefox沒有outerHTML用以下方法解決2009-06-06Javascript 阿拉伯?dāng)?shù)字轉(zhuǎn)化中國大寫數(shù)字的函數(shù)代碼
將阿拉伯?dāng)?shù)字轉(zhuǎn)化中國大寫數(shù)字的函數(shù)代碼,需要的朋友可以參考下。2010-04-04