JavaScript的DOM_动态加载脚本和样式

一、动态加载脚本

　　当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。

　　1、动态加载js文件

　　　　比如：我们想在需要检测浏览器的时候，再引入检测文件。

<script type="text/javascript">
    window.onload = function(){
        alert(typeof BrowserDetect);
    }
    var flag = true; //设置 true 再加载
    if (flag) {
        loadScript('browserdetect.js'); //设置加载的 js
    }
    function loadScript(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        //document.head.appendChild(script); //document.head 表示<head>
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>

　　2、动态执行 js

<script type="text/javascript">
    window.onload = function(){
        
    }
    var flag = true; //设置 true 再加载
    if (flag) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        var text = document.createTextNode("alert('Lee')"); //IE6,7,8 浏览器报错
        script.appendChild(text);
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>

　　IE 6,7,8浏览器认为 script 是特殊元素，不能在访问子节点。为了兼容，可以使用 text属性来代替。

<script type="text/javascript">
    window.onload = function(){
        
    }
    var flag = true; //设置 true 再加载
    if (flag) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.text = "alert('Lee')";
        script.appendChild(text);
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>

二、动态加载样式

　　为了动态的加载样式表，比如切换网站皮肤。样式表有两种方式进行加载，一种是<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

<script type="text/javascript">
    var flag = true;
    if (flag) {
        var style = document.createElement('style');
        style.type = 'text/css';
        //var box= document.createTextNode('#box{background:red}');// IE6,7,8 不支持
        //style.appendChild(box);
        document.getElementsByTagName('head')[0].appendChild(style);
        insertRule(document.styleSheets[0], '#box', 'background:red', 0);
    }
    function insertRule(sheet, selectorText, cssText, position) {
        //如果是非 IE6,7,8
        if (sheet.insertRule) {
            sheet.insertRule(selectorText + "{" + cssText + "}", position);
            //如果是 IE6,7,8
        } else if (sheet.addRule) {
            sheet.addRule(selectorText, cssText, position);
        }
    }
</script>