一 动态脚本

// 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的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. 如何做好错误处理？（PHP篇）

    起因 之前我在封装 PHP 一个类库的时候,如果有遇到错误(例如构造函数传参不合法的话),则直接 die() ,后来发现这种方法很不好,会直接退出程序. 所以我想到给 PHP 上异常捕获的机制了. 错 ...

  2. 题解 P2146 【[NOI2015]软件包管理器】

    题目大意 ​ 给你一棵树, 求一点到根的路径上有多少个未标记点并全标记, 和询问一个点的子树内有多少已标记点和撤销标记 解题方法 1: install 操作 ​ 这个操作是求一点到根的路径上有多少个未 ...

  3. Python--CSV模块

    CSV csv文件格式是一种通用的电子表格和数据库导入导出格式 简介 Python csv模块封装了常用的功能,使用的简单例子如下: 写入 # 写入csv文件 import csv csvfile = ...

  4. 【2019北京集训2】duck 线段树优化建图+tarjan

    题目大意:给你$n$个点,第$i$个点有点权$v_i$.你需要将这$n$个点排成一排,第$i$个点的点权能被累加当且仅当这个点前面存在编号在$[l_i,r_i]$中的点,问你这些点应该如何排列,点权和 ...

  5. linq查询时查询语句中附带多个查询时“已有打开的与此 Command 相关联的 DataReader，必须首先将它关闭”

    主要原因是因为EF采用的 DataReader来进行数据的存储,此时connection使用的是同一个. 例如: list = _tzNewsService.GetAll().Where(w => ...

  6. 收藏一篇关于Asp.net Response.Filter的文章

    Capturing and Transforming ASP.NET Output with Response.Filter https://weblog.west-wind.com/posts/20 ...

  7. (转)explain、db2exfmt 命令的使用：文本输出执行计划

    原文:http://blog.51cto.com/freebile/1068610 db2有图形执行计划显示工具,如果没有图形环境,如unix主机,可以生成文本的文件来显示执行计划1.如果第一次执行, ...

  8. vue插件ele使用小坑

    1.ele-table组件中selection如何默认选中 使用官网提供的api-->>Table Methods中的toggleRowSelection,关于这个api基本介绍就不说了. ...

  9. 对 Phantomjs / CasperJS 进行远程调试

    CasperJS运行在PhantomJS之上,其实也是启用PhantomJS的远程调试功能 PhantomJS 是一个无图形界面的浏览器,它支持各种Web标准:DOM处理,CSS选择器,JSON,Ca ...

  10. spring mvc 数据转换

    项目目录结构 User.java package org.mythsky.springmvcdemo.model; import org.springframework.format.annotati ...