JavaScript 動(dòng)態(tài)加載腳本和樣式的方法
一 動(dòng)態(tài)腳本
當(dāng)網(wǎng)站需求變大,腳本的需求也逐步變大;我們不得不引入太多的JS腳本而降低了整站的性能;
所以就出現(xiàn)了動(dòng)態(tài)腳本的概念,在適時(shí)的時(shí)候加載相應(yīng)的腳本;
1.動(dòng)態(tài)引入js文件
var flag = true; if(flag){ loadScript('browserdetect.js'); // 調(diào)用函數(shù),引入路徑; } function loadScript(url){ var script = document.createElement('script'); // 創(chuàng)建script標(biāo)簽; script.type = 'text/javascript'; // 設(shè)置type屬性; script.src = url; // 引入url; document.getElementsByTagName('head')[0].appendChild(script); // 將script引入<head>中; }
2.動(dòng)態(tài)執(zhí)行js代碼
var script = document.createElement('script'); script.type = 'text/javascript'; var text = document.createTextNode("alert('Lee')"); // 設(shè)置script標(biāo)簽內(nèi)容;IE會(huì)報(bào)錯(cuò); script.appendChild(text); document.getElementsByTagName('head')[0].appendChild(script); // PS:IE瀏覽器認(rèn)為script是特殊元素,不能再訪問(wèn)子節(jié)點(diǎn); // 為了兼容,可以使用text屬性來(lái)代替; function loadScriptString(code){ var script = document.createElement("script"); script.type = "text/javascript"; try{ // IE瀏覽器認(rèn)為script是特殊元素,不能再訪問(wèn)子節(jié)點(diǎn);報(bào)錯(cuò); script.appendChild(document.createTextNode(code)); // W3C方式; }catch(ex){ script.text = code; // IE方式; } document.body.appendChild(script); } // 調(diào)用; loadScriptString("function sayHi(){alert('hi')}");
二 動(dòng)態(tài)樣式
為了動(dòng)態(tài)的加載樣式表,比如切換網(wǎng)站皮膚;
樣式有兩種方式進(jìn)行加載,一種是<link>標(biāo)簽,一種是<style>標(biāo)簽;
1.動(dòng)態(tài)引入link文件
var flag = true; if(flag){ loadStyles('basic.css'); // 調(diào)用函數(shù),引入路徑; } function loadStyles(url){ var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = url; document.getElementsByTagName('head')[0].appendChild(link); }
2.動(dòng)態(tài)執(zhí)行style代碼
var flag = true; if(flag){ var style = docuemnt.createElement('style'); style.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(style); insertRule(document.styleSheets[0],'#box','background:red',0); } function insertRule(sheet,selectorText,cssText,position){ // 如果是非IE; if(sheet.insertRule){ sheet.insertRule(selectorText+"{"+cssText+"}",position); // 如果是IE; }else if(sheet.addRule){ sheet.addRule(selectorText,cssText,position); } }
// 動(dòng)態(tài)執(zhí)行style2 function loadStyleString(css){ var style = document.createElement("style"); style.type = "text/css"; try{ // IE會(huì)報(bào)錯(cuò);不允許向<style>元素添加子節(jié)點(diǎn); style.appendChild(document.createTextNode(css)); }catch(ex){ // 此時(shí),訪問(wèn)元素的StyleSheet屬性,該屬性有有一個(gè)cssText屬性,可以接受CSS代碼; style.styleSheet.cssText = css; } var head = document.getElementsByTagName("head")[0]; head.appendChild(style); } // 調(diào)用; loadStyleString("body {background-color:red}");
相關(guān)文章
Script標(biāo)簽與訪問(wèn)HTML頁(yè)面詳解
本篇文章主要是對(duì)Script標(biāo)簽與訪問(wèn)HTML頁(yè)面進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁(yè)進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況,loading進(jìn)度條可用動(dòng)畫(huà)的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。代碼簡(jiǎn)單易懂,效果非常好,需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09Node.js實(shí)戰(zhàn) 建立簡(jiǎn)單的Web服務(wù)器
本章我們同樣通過(guò)實(shí)戰(zhàn)的演練,利用Node.js建立一個(gè)簡(jiǎn)單的Web服務(wù)器2012-03-03JS+CSS實(shí)現(xiàn)的豎向簡(jiǎn)潔折疊菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的豎向簡(jiǎn)潔折疊菜單效果代碼,涉及JavaScript鏈?zhǔn)讲僮髋c元素遍歷等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10Javascript與vbscript數(shù)據(jù)共享
Javascript與vbscript數(shù)據(jù)共享...2007-01-01如何在微信小程序中實(shí)現(xiàn)Mixins方案
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實(shí)現(xiàn)Mixins方案的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06