一 动态脚本

// 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能;

// 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本;

 1.动态引入js文件

     var flag = true;

     if(flag){

         loadScript('browserdetect.js');                    // 调用函数,引入路径;

     }

     function loadScript(url){

         var script = document.createElement('script');     // 创建script标签;

         script.type = 'text/javascript';                   // 设置type属性;

         script.src = url;                                  // 引入url;

         document.getElementsByTagName('head')[0].appendChild(script);    // 将script引入<head>中;

     }
 2.动态执行js代码

     var script = document.createElement('script');

     script.type = 'text/javascript';

     var text = document.createTextNode("alert('Lee')");    // 设置script标签内容;IE会报错;

     script.appendChild(text);

     document.getElementsByTagName('head')[0].appendChild(script);

     // PS:IE浏览器认为script是特殊元素,不能再访问子节点;

     // 为了兼容,可以使用text属性来代替;

     function loadScriptString(code){

         var script = document.createElement("script");

         script.type = "text/javascript";

         try{

         // IE浏览器认为script是特殊元素,不能再访问子节点;报错;

             script.appendChild(document.createTextNode(code));　　// W3C方式;

         }catch(ex){

             script.text = code;　　　　　　　　　　　　　　　　　　　　// IE方式;

         }

         document.body.appendChild(script);

     }

     // 调用;

     loadScriptString("function sayHi(){alert('hi')}");

二 动态样式

// 为了动态的加载样式表,比如切换网站皮肤;

// 样式有两种方式进行加载,一种是<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代码

     var flag = true;

     if(flag){

         var style = docuemnt.createElement('style');

         style.type = 'text/css';

         document.getElementsByTagName('head')[0].appendChild(style);

         insertRule(document.styleSheets[0],'#box','background:red',0);

     }

     function insertRule(sheet,selectorText,cssText,position){

         // 如果是非IE;

         if(sheet.insertRule){

             sheet.insertRule(selectorText+"{"+cssText+"}",position);

         // 如果是IE;

         }else if(sheet.addRule){

             sheet.addRule(selectorText,cssText,position);

         }

     }
 // 动态执行style2

     function loadStyleString(css){

         var style = document.createElement("style");

         style.type = "text/css";

         try{

         // IE会报错;不允许向<style>元素添加子节点;

             style.appendChild(document.createTextNode(css));

         }catch(ex){

         // 此时,访问元素的StyleSheet属性,该属性有有一个cssText属性,可以接受CSS代码;

             style.styleSheet.cssText = css;

         }

         var head = document.getElementsByTagName("head")[0];

         head.appendChild(style);

     }

     // 调用;

     loadStyleString("body {background-color:red}");

JavaScript--动态加载脚本和样式(23)的更多相关文章

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

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

  2. JavaScript的DOM_动态加载脚本和样式

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

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

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

  4. JavaScript动态加载资源

    //动态加载样式 function dynamicLoadingCss(path){ if(!path || path.length === 0){ return false; } var head ...

  5. js动态加载脚本

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

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

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

  7. jquery动态加载脚本

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

  8. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  9. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

随机推荐

  1. 【Spark调优】：RDD持久化策略

    [场景] Spark对RDD执行一系列算子操作时,都会重新从头到尾计算一遍.如果中间结果RDD后续需要被被调用多次,可以显式调用 cache()和 persist(),以告知 Spark,临时保存之前 ...

  2. web安全之XSS注入

    之前在做项目的时候有遇到一些安全问题,XSS注入就是其中之一 那么,什么是XSS注入呢? XSS又叫CSS (Cross Site Script) ,跨站脚本攻击.它指的是恶意攻击者往Web页面里插入 ...

  3. 两台linux主机使用unison + inotify实现web文件夹同步

    两台服务器同步数据 unison 是一款跨平台的文件同步对象,不仅支撑本地对本地同步,也支持通过SSH,RSH和Socket 等网络协议进行同步. unison 支持双向同步,你可以同A同步到B ,也 ...

  4. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  5. Android从零开始

    Android开发环境的安装 1 IDE Android可以使用开发的IDE有Eclipse 或者 Android Studio.Android Studio还处于v 0.1.x版本,是early a ...

  6. Prototype原型模式(创建型模式)

    1.原型模式解决的问题 现在有一个抽象的游戏设施建造系统,负责构建一个现代风格和古典风格的房屋和道路. 前提:抽象变化较慢,实现变化较快(不稳定) 整个抽象的游戏设施建造系统相对变化较慢,本例中只有一 ...

  7. Evenbus简单用法

    Evenbus是一个开源插件,可以帮我们在app里面进行数据传递,传递的对象为Object,就是说可以传输任何对象,但是一般为了拓展性和维护性,我们都用来传输Bean类型. 这个插件最重要的是注册和反 ...

  8. sql左右连接的区别

    数据表的连接有: 1.内连接(自然连接): 只有两个表相匹配的行才能在结果集中出现 2.外连接: 包括 (1)左外连接(左边的表不加限制) (2)右外连接(右边的表不加限制) (3)全外连接(左右两表 ...

  9. [Java初探08]__简单学习Java类和对象

    前言 在前面的学习中,我们对面向对象的编程思想有了一个基本的了解,并且简单的了解了类和对象的定义.那么类和对象在Java语言中是如何表现的,这次,就从实际出发,学习一下一下类和对象在Java语言中的使 ...

  10. Docker环境的持续部署优化实践

    最近两周优化了我们持续部署的程序,收效显著,记录下来分享给大家 背景介绍 那年公司快速成长,频繁上线新项目,每上线一个项目,就需要新申请一批机器,初始化,部署依赖的服务环境,一个脚本行天下 那年项目发 ...