動(dòng)態(tài)加載、移除js/css文件的示例代碼

更新時(shí)間：2018年03月20日 09:53:41 作者：dongsdh

本文簡(jiǎn)單介紹動(dòng)態(tài)加載、移除、替換js/css文件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒加載，需要的朋友參考下吧

本文簡(jiǎn)單介紹動(dòng)態(tài)加載、移除、替換js/css文件。有時(shí)候我們?cè)趯?xiě)前端的時(shí)候，會(huì)有出現(xiàn)需要?jiǎng)討B(tài)加載一些東如css js 這樣能減輕用戶(hù)加載負(fù)擔(dān)，從而提高響應(yīng)效率。下面貼出代碼。

 <script language="JavaScript">
//動(dòng)態(tài)加載一個(gè)js/css文件
function loadjscssfile(filename, filetype){
if (filetype=="js"){
varfileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src",filename)
}
else if (filetype=="css"){
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>

使用示例：

loadjscssfile("myscript.js","js")
loadjscssfile("javascript.PHP","js")
loadjscssfile("mystyle.css","css")
<scriptlanguage="javascript">
//移動(dòng)已經(jīng)加載過(guò)的js/css
function removejscssfile(filename,filetype){
vartargetelement=(filetype=="js")? "script" :(filetype=="css")? "link" : "none"
var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none"
varallsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0;i--){
if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
 allsuspects[i].parentNode.removeChild(allsuspects[i])
}
}
</script>

使用示例：

removejscssfile("somescript.js","js")
removejscssfile("somestyle.css","css")

總結(jié)

以上所述是小編給大家介紹的動(dòng)態(tài)加載、移除js/css文件的示例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript如何借用構(gòu)造函數(shù)繼承
這篇文章主要介紹了JavaScript如何借用構(gòu)造函數(shù)繼承,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
詳解JavaScript如何創(chuàng)建一個(gè)非自動(dòng)播放的GIF網(wǎng)絡(luò)組件
這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個(gè)允許您的用戶(hù)決定是否要播放gif的Web組件，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的可以參考一下
2022-02-02
JS實(shí)現(xiàn)可點(diǎn)擊展開(kāi)與關(guān)閉的左側(cè)廣告代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可點(diǎn)擊展開(kāi)與關(guān)閉的左側(cè)廣告代碼,通過(guò)鼠標(biāo)onClick事件調(diào)用自定義javascript函數(shù)實(shí)現(xiàn)頁(yè)面元素及樣式的顯示與隱藏效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-09-09
JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
本文給大家總結(jié)了javascript函數(shù)的一些注意要點(diǎn)及js匿名函數(shù)，主要知識(shí)點(diǎn)有：函數(shù)的基本語(yǔ)法、函數(shù)的參數(shù)、函數(shù)的重載相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
webpack教程之webpack.config.js配置文件
本篇文章主要介紹了webpack教程之webpack.config.js配置文件，具有一定的參考價(jià)值，有興趣的可以了解一席
2017-07-07
基于JavaScript實(shí)現(xiàn)前端數(shù)據(jù)多條件篩選功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)前端數(shù)據(jù)多條件篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法
這篇文章主要介紹了JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法,涉及javascript針對(duì)數(shù)組的遍歷、判斷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
Js+Flash實(shí)現(xiàn)訪問(wèn)剪切板操作
最近需要遇到了這個(gè)問(wèn)題點(diǎn)擊按鈕復(fù)制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開(kāi)源得js+Flash實(shí)現(xiàn)得剪切板操作
2012-11-11
使用JavaScript實(shí)現(xiàn)鏈表的數(shù)據(jù)結(jié)構(gòu)的代碼
鏈表（Linked list）是一種常見(jiàn)的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)，是一種線(xiàn)性表，但是并不會(huì)按線(xiàn)性的順序存儲(chǔ)數(shù)據(jù)，而是在每一個(gè)節(jié)點(diǎn)里存到下一個(gè)節(jié)點(diǎn)的指針(Pointer) 。下面我們用 JavaScript 代碼對(duì)鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行實(shí)現(xiàn)
2017-08-08
JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼,通過(guò)鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10