一、动态加载脚本

　　当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 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. 百度开源e-chart初探

    前言: 近年来,在数据服务的公司中,数据可视化越来越重要.随着而来的,国内外正在如火如荼的开发各种在线js视图展示框架.而百度的e-chart算是实用性较高且体验最好的!今天闲来无事,便来玩玩~ ec ...

  2. Delphi下OpenGL2d绘图(03)-画线

    一.前言 画线与画点基本上代码是相同.区别在于glBegin()的参数.绘制的框架代码可以使用 Delphi下OpenGL2d绘图(01)-初始化 中的代码.修改的部份为 Draw 函数的内容. 二. ...

  3. 使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。

    套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”.真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现下拉刷新 ...

  4. photoshop cc 2014 下载安装及汉化资源及切图简要使用教程

    这是百度经验上一个pscc 2014 版本的下载安装汉化教程,亲测有效: http://jingyan.baidu.com/article/647f0115bce3847f2148a80c.html ...

  5. Groovy中String转换Gstring用于动态插值

    知识点是Groovy中的模板引擎 GStringTemplateEngine 第一个例子: def binding = [ firstname : "Grace", lastnam ...

  6. eclipse 查看源码 source not found

    是因为eclipse里面没有设置好源码路径. 源码路径在jdk安装包里面 C:/Program Files/Java/jdk1.8.0_191/src.zip  这个src.zip文件, 设置ecli ...

  7. javascrip 实现简单的计算器功能

    页面样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. Maven学习总结（二）：安装

    一:Maven下载 下载地址:http://maven.apache.org/download.cgi 下载完成后,得到一个压缩包,解压,可以看到maven的组成目录 Maven目录分析 bin:含有 ...

  9. Breakpoint debugging

    断点调试的作用: A:查看程序的执行流程. B:调试程序. package basic.java; public class DebugTest { public static void main(S ...

  10. OFDM正交频分复用---基础入门图示

    @(162 - 信号处理) 整理转载自:给小白图示讲解OFDM 下面以图示为主讲解OFDM,以"易懂"为第一要义. 注:下面的讨论如果不做说明,均假设为理想信道. *** 一张原理 ...