JavaScript 動態(tài)加載腳本和樣式的方法
一 動態(tài)腳本
當(dāng)網(wǎng)站需求變大,腳本的需求也逐步變大;我們不得不引入太多的JS腳本而降低了整站的性能;
所以就出現(xiàn)了動態(tài)腳本的概念,在適時的時候加載相應(yīng)的腳本;
1.動態(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.動態(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會報錯;
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
// PS:IE瀏覽器認(rèn)為script是特殊元素,不能再訪問子節(jié)點;
// 為了兼容,可以使用text屬性來代替;
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
// IE瀏覽器認(rèn)為script是特殊元素,不能再訪問子節(jié)點;報錯;
script.appendChild(document.createTextNode(code)); // W3C方式;
}catch(ex){
script.text = code; // IE方式;
}
document.body.appendChild(script);
}
// 調(diào)用;
loadScriptString("function sayHi(){alert('hi')}");
二 動態(tài)樣式
為了動態(tài)的加載樣式表,比如切換網(wǎng)站皮膚;
樣式有兩種方式進(jìn)行加載,一種是<link>標(biāo)簽,一種是<style>標(biāo)簽;
1.動態(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.動態(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);
}
}
// 動態(tài)執(zhí)行style2
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
// IE會報錯;不允許向<style>元素添加子節(jié)點;
style.appendChild(document.createTextNode(css));
}catch(ex){
// 此時,訪問元素的StyleSheet屬性,該屬性有有一個cssText屬性,可以接受CSS代碼;
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
// 調(diào)用;
loadStyleString("body {background-color:red}");
相關(guān)文章
JavaScript實現(xiàn)網(wǎng)頁加載進(jìn)度條代碼超簡單
網(wǎng)頁進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進(jìn)度情況,loading進(jìn)度條可用動畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡單易懂,效果非常好,需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
Node.js實戰(zhàn) 建立簡單的Web服務(wù)器
本章我們同樣通過實戰(zhàn)的演練,利用Node.js建立一個簡單的Web服務(wù)器2012-03-03
Javascript與vbscript數(shù)據(jù)共享
Javascript與vbscript數(shù)據(jù)共享...2007-01-01

