一、动态加载脚本

　　当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 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. Charles 抓取 iphone https的设置方式

    1. Charles:  help > SSL Proxying > Install Charles Root Certificate, 2. 将会打开 钥匙串访问 的功能,查找 Char ...

  2. 【TCP协议】MTU和MSS详解

    需要注意的是,区别两种帧封装格式:802标准帧和以太网帧 1,在802标准定义的帧格式中,长度字段是指它后续数据的字节长度,但不包括C R C检验码.RFC 1042(IEEE 802) 2,RFC ...

  3. C# 之构造函数

    构造函数是一种特殊的成员函数,它主要用于为对象分配存储空间,对数据成员进行初始化. 构造函数具有一些特殊的性质: (1)构造函数的名字必须与类同名; (2)构造函数没有返回类型,它可以带参数,也可以不 ...

  4. 五、standalone运行模式

    在上文中我们知道spark的集群主要有三种运行模式standalone.yarn.mesos,其中常被使用的是standalone和yarn,本文了解一下什么是standalone运行模式,它的运行流 ...

  5. ecstore关于smarty语法调用

    以下是smarty语法 转自http://www.phpwindow.com/ecstore_smarty2.html assign 属性 类型 是否必须 描述 var string yes 被赋值的 ...

  6. 16、IO (Properties、序列化流、打印流、CommonsIO)

    Properties集合的特点 * A: Properties集合的特点 * a: Properties类介绍 * Properties 类表示了一个持久的属性集.Properties 可保存在流中或 ...

  7. Spring_Spring与DAO_Spring的事务管理

    一.Spring的事务管理 在Spring中通常可以通过以下三种方式来实现对事务的管理: 使用Spring的事务代理工厂管理事务 使用Spring的事务注解管理事务 使用AspectJ的AOP配置管理 ...

  8. Java数组声明与拷贝的几种方式

    Java数组声明的三种方式 第一种(声明并初始化):          数据类型[] 数组名={值,值,...};          例:int[] a = {1,2,3,4,5,6,7,8};    ...

  9. java工厂模式个人体会

    上一边文章主要对单例模式做了一个总结,这篇文章主要对工厂模式也写一写个人的体会. 工厂模式是设计模式的一种,它主要是把实现产品对象的过程封装起来,然后提供给客户端相应的接口.工厂模式也是有3种,分别为 ...

  10. Java与C++区别：重载（Overloading）

    Java中一个类的函数重载可以在本类中的函数和来自父类中的函数之间进行,而C++类中的函数重载只能是本类中的(即不包括来自父类的函数),这是他们一个非常重要的区别.在其他方面的要求都是一致的,即要求函 ...