一 動態腳本
當網站需求變大,腳本的需求也逐步變大;我們不得不引入太多的JS腳本而降低了整站的性能;
所以就出現了動態腳本的概念,在適時的時候加載相應的腳本;
1.動態引入js文件
var flag = true;
if(flag){
loadScript('browserdetect.js'); // 調用函數,引入路徑;
}
function loadScript(url){
var script = document.createElement('script'); // 創建script標簽;
script.type = 'text/javascript'; // 設置type屬性;
script.src = url; // 引入url;
document.getElementsByTagName('head')[0].appendChild(script); // 將script引入<head>中;
}
2.動態執行js代碼
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert('Lee')"); // 設置script標簽內容;IE會報錯;
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
// PS:IE浏覽器認為script是特殊元素,不能再訪問子節點;
// 為了兼容,可以使用text屬性來代替;
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
// IE浏覽器認為script是特殊元素,不能再訪問子節點;報錯;
script.appendChild(document.createTextNode(code)); // W3C方式;
}catch(ex){
script.text = code; // IE方式;
}
document.body.appendChild(script);
}
// 調用;
loadScriptString("function sayHi(){alert('hi')}");
二 動態樣式
為了動態的加載樣式表,比如切換網站皮膚;
樣式有兩種方式進行加載,一種是<link>標簽,一種是<style>標簽;
1.動態引入link文件
var flag = true;
if(flag){
loadStyles('basic.css'); // 調用函數,引入路徑;
}
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.動態執行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);
}
}
// 動態執行style2
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
// IE會報錯;不允許向<style>元素添加子節點;
style.appendChild(document.createTextNode(css));
}catch(ex){
// 此時,訪問元素的StyleSheet屬性,該屬性有有一個cssText屬性,可以接受CSS代碼;
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
// 調用;
loadStyleString("body {background-color:red}");