一、動態載入腳本 當網站需求變大，腳本的需求也逐漸變大。我們就必須引入太多的 JS 腳本而降低了整站的效能，所以就出現了動態腳本的概念，在適時的時候載入對應的腳本。 例如：我們想在需要偵測瀏覽器的時候，再引入偵測文件。 複製程式碼程式碼如下: <br /> window.onload = function(){<br /> alert(typeof BrowserDetect);<br /> }<br /> var flag = true; //設定true 再載入<br /> if (flag) {<br /> loadScript('browserdetect.js'); //設定載入的js<br /> }<br /> function loadScript(url) {<br /> var script = document.createElement('script');<br /> script.type = 'text/javascript';<br /> script.src = url;<br /> //document.head.appendChild(script); //document.head 表示<head><br /> document.getElementsByTagName('head')[ 0].appendChild(script);<br /> }<br />動態執行js <br /> window.onload = function(){<br /> <br /> }<br /> var flag = true; //設定true 再載入<br /> if (flag) {<br /> var script = document.createElement('script');<br /> script.type = 'text/javascript';<br /> var text = document.createTextNode("alert('Lee' )"); //IE6,7,8 瀏覽器報錯誤<br /> script.appendChild(text);<br /> document.getElementsByTagName('head')[0].appendChild(script);<br /> }<br />IE 6,7,8瀏覽器認為script 是特殊元素，不能在存取子節點。為了相容，可以使用 text屬性來代替。 <br /> window.onload = function(){<br /> <br /> }<br /> var flag = true; //設定true 再載入<br /> if (flag) {<br /> var script = document.createElement('script');<br /> script.type = 'text/javascript';<br /> script.text = "alert('Lee')"; <br /> script.appendChild(text);<br /> document.getElementsByTagName('head')[0].appendChild(script);<br /> }<br />需要做所有瀏覽器相容 二、動態載入樣式 為了動態的載入樣式表，例如切換網站皮膚。樣式表有兩種方式進行加載，一種是標籤，一種是標籤。 動態執行 link 複製程式碼程式碼如下: var flag = true; var flag = true; (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); } 動態執行style 複製程式碼 程式碼如下:<br /> var flag = true;<br /> if (flag) {<br /> var style = document.createElement('style');<br /> style.type = 'text/css';<br /> // var box= document.createTextNode('#box{background:red}');// IE6,7,8 不支援<br /> //style.appendChild(box);<br /> document.getElementsByTagName('head') [0].appendChild(style);<br /> insertRule(document.styleSheets[0], '#box', 'background:red', 0);<br /> }<br /> function insertRule(sheet, selectorText, cssText , position) {<br /> //若是非IE6,7,8<br /> if (sheet.insertRule) {<br /> sheet.insertRule(selectorText "{" cssText "}", position);<br /> //如果是IE6,7,8<br /> } else if (sheet.addRule) {<br /> sheet.addRule(selectorText, cssText, position);<br /> }<br /> }
