一、动态加载脚本 当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 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>需要做所有浏览器兼容 二、动态加载样式 为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是标签，一种是标签。</p> <p>动态执行 link</p> <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode76'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode76"> <br> var flag = true;<br> if (flag) {<br> loadStyles('basic.css');<br> }<br> function loadStyles(url) {<br> var link = document.createElement('link');link.rel = 'stylesheet';<br> link.type = 'text/css';<br> link.href = url;<br> document.getElementsByTagName('head')[0].appendChild(link);<br> }<br> </div> <br> <br>动态执行 style <p><br></p> <div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode77'));"><u>复制代码</u></span></div>代码如下:</div> <div class="msgborder" id="phpcode77"> <br><script type="text/javascript"><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> }<br></script><br> </div>
