一、动态加载脚本

　　当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 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. nodejs简易代理服务器

    直接代码: var http = require('http') var proxy = http.createServer(function (request, response) { var op ...

  2. Vue 2.0的学习笔记：Vue的过滤器

    转自: https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html 过滤器的介绍 1.在Vue中使用过滤器(Filters)来渲染数 ...

  3. oracle lpad rpad函数

    学习并记录 1.情况一 ) from dual; 运行结果如下: email长度5,默认添加3个空格在左边 2.情况二 ) from dual; 运行结果如下: email长度5,截取2两个字符 3. ...

  4. java核心技术-内部类

    高级类特性-(类的成员之一:内部类) 内的成员之一:内部类(属性.方法.构造器.代码块) 可以有四种权限访问修饰符 注意:外部类 只有两种 public 和 default 定义 : 可以将一个类的定 ...

  5. scrum 项目的基本模式

    scrum 项目中有 3 个主要的角色:产品所有者, Scrum 主管和团队成员 产品所有者和团队其他成员一起工作,负责维护生产积压工作表 (production backlog) ,并对表中的项制定 ...

  6. Java CountDownLatch解析（下）

    写在前面的话 在上一篇CountDownLatch解析中,我们了解了CountDownLatch的简介.CountDownLatch实用场景.CountDownLatch实现原理中的await()方法 ...

  7. JDBC入门（1）—— 入门案例

    JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口组 ...

  8. python学习之老男孩python全栈第九期_day028知识点总结——面向对象进阶、hashlib

    一. 面向对象进阶与实例 dic = {'k': 'v' } 对象:存储 属性 和 调用方法 dic['k'] = 'v' class Foo: def __init__(self, name, ag ...

  9. csharp: Linq keyword example

    /// <summary> /// http://www.dotnetperls.com/linq /// </summary> public partial class Li ...

  10. js生成qq客服在线代码

    说到QQ客服在线代码,随便那么百度谷歌一下就会出来,一般都是 <a target="blank" href="http://wpa.qq.com/msgrd?V=1 ...