一、动态加载脚本

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

    最近在学习Rust,想通过这个记录一下学习过程 首先是老规矩:HelloWorld // Rust单行注释 /// 文档注释 /*     多行注释 */ fn main() {     // 这是个 ...

  2. 类class思维导图

  3. MySQL---4、语句规范

    1.命名规范 (1)库名.表名.(按现在的规范类似; PromoHayaoRecord),数据库名使用小写,字段名必须使用小写字母,并采用下划线分割.关键字与函数名称全部大写.(2)库名.表名.字段名 ...

  4. static关键字作用

    之前讲到final关键字的作用是每次面试的时候我必问求职者的两个问题之一,另外一个问题就是文本会写到的static.final和static一样,都是一个小问题可以看到一个人的基础是否扎实以及平时是否 ...

  5. 使用sql语句备份一张表

    如何使用sql语句复制一张表? 方法一:第一步:先建一张新表,新表的结构与老表相等. create table newtable like oldtable; 第二步:将老表中的值复制到新标中. in ...

  6. fzou 1759 Super A^B mod C

    Problem 1759 Super A^B mod CAccept: 456    Submit: 1488Time Limit: 1000 mSec    Memory Limit : 32768 ...

  7. Oracle数据库采用数据泵方式导入导出数据

    特别说明:Oralce的数据泵导入导出技术只能用在数据库服务器上,在只有客户端的机器上是无法使用数据泵技术的. 1.创建备份文件目录  mkdir d:\dmp 2.在Oralce中注册该目录,将目录 ...

  8. Java中返回值的详解

    package com.company; //java中main()函数中调用其他方法的两种方式//1.实例化对象 public class returnDemo { public static vo ...

  9. BZOJ1053 [HAOI2007]反素数 & BZOJ3085 反质数加强版SAPGAP

    BZOJ 1053 Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0<i<x ,则称x ...

  10. js中作用域链和作用域

    作用域 在JavaScript中,我们可以将作用域定义为一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称(变量名或者函数名)进行变量查找. 经过研究<高级程序设计 ...