一、动态加载脚本

　　当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 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>

JavaScript的DOM_动态加载脚本和样式的更多相关文章

  1. 第一百一十八节，JavaScript，动态加载脚本和样式

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

  2. js动态加载脚本

    最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法 ...

  3. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  4. JS 动态加载脚本 执行回调

    JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件 ...

  5. jquery动态加载脚本

    如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...

  6. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

  7. HTML5学习笔记（二十三）：DOM应用之动态加载脚本

    同步加载和执行JS的情况 在HTML页面的</body>表情之前添加的所有<script>标签,无论是直接嵌入JS代码还是引入外部js代码都是同步执行的,这里的同步执行指的是在 ...

  8. js与jquery的动态加载脚本文件

    jquery动态加载 jQuery.getScript(url,[callback]) js动态加载 function loadJs(name) { document.write('<scrip ...

  9. JS 动态加载脚本的4种方法

    有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...

随机推荐

  1. [译]用R语言做挖掘数据《七》

    时间序列与数据挖掘 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用 ...

  2. postgresql 备份与恢复

    备份 C:\PostgreSQL\\bin>pg_dump -h localhost -p -U postgres Mes > d:/.bak 恢复 C:\PostgreSQL\\bin& ...

  3. mac上用 adb 命令安装Android应用

    cd /Users/xxx/android-sdk-macosx/platform-tools adb install -r xxxx.apk   # -r 替换当前安装包 adb uninstall ...

  4. ASP.NET 表单验证方法与客户端(浏览器)服务器交互机制的故事

    想到这个问题完全是一个意外吧,是在寻找另外一个问题答案的过程中,才对验证方法与浏览器服务器交互机制的关系有了清晰的认识. 先说下验证方法,验证方法分为前台验证和后台验证. 前台验证就是类似jQuery ...

  5. 程序员必备技能：代码审查 (Google牛人谈Code Review)

    在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我想我可以写点和专业相关的东西,这些东西很有趣,但是如果我 ...

  6. 关于二进制和字符串及base64格式

    字符串转二进制可以直接转,而二进制转字符串不可以,其中间包含的各种特殊符号,转成字符串时会出现问题,需要将二进制进行base64编码,并且需要在结尾加上#0表示结尾,然后转成字符串.

  7. BZOJ4598: [Sdoi2016]模式字符串(点分治 hash)

    题意 题目链接 Sol 直接考虑点分治+hash匹配 设\(up[i]\)表示\(dep \% M = i\)的从下往上恰好与前\(i\)位匹配的个数 \(down\)表示\(dep \% M = i ...

  8. Maven学习总结（五）：maven命令的含义及用法

    Maven有许多命令,不管是在命令行(1),还是在Myecplise10的Maven项目--右键Run As(2),还是IDEA的左下角--Maven Projects--Maven项目名--Life ...

  9. chrome devtools的debug相关

    搜索ctrl+p:搜索Sources面板中指定的文件:然后在主窗口文件标签右键选择reveal in navigator可以在目录中显示当前文件.ctrl+f:搜索devtool主显示窗口所在文件的指 ...

  10. Word 关闭 Passive Voice

      Sheryl prefers passive voice for some of her writing (such as business documents and correspondenc ...