一 动态脚本

// 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的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. 浏览器特权域XSS漏洞

    导语:科普什么是浏览器特权域XSS,可以用来干什么? 作者:天析 团队:Arctic Shell 为什么科普这个? 今天在群里看到有表姐说这个,然后恰好又有学姐在问什么是特权域XSS,于是就来说说这个 ...

  2. SpringBoot入门之内嵌Tomcat配置

    spring boot默认web程序启用tomcat内嵌容器tomcat,监听8080端口,servletPath默认为 / .需要用到的就是端口.上下文路径的修改,在spring boot中其修改方 ...

  3. 解放双手 | Jenkins + gitlab + maven 自动打包部署项目

    前言 记录 Jenkins + gitlab + maven 自动打包部署后端项目详细过程! 需求背景 不会偷懒的程序员不是好码农,传统的项目部署,有时候采用本地手动打包,再通过ssh传到服务器部署运 ...

  4. sync.Pool 资源池

    sync.Pool type Pool struct { // 可选参数New指定一个函数在Get方法可能返回nil时来生成一个值 // 该参数不能在调用Get方法时被修改 New func() in ...

  5. sql server 2012 打开提示无效的许可证数据。需要重新安装

        重装什么的没有用,需要下载Visual Studio 2010 Isolated Shell (zh-CN) ,重新安装后就好了   下载地址 Visual Studio 2010 Isola ...

  6. webgl之观察三维空间

    在之前的教程中,我们已经接触到了3d的基本应用,而这里,将会继续介绍两种不同的相机,即透视相机和正投影相机:还会学习设置相机的不同参数,这样就可以使场景以不同的角度显示出来. 一.正投影和透视投影概念 ...

  7. ElasticSearch入门3: 高级查询

    单字段 模糊匹配查询与精准查询 postman请求 POST 127.0.0.1:9200/book/_search 请求json: { "query":{ "match ...

  8. idea 运行scala代码 报错：Exception in thread "main" java.lang.NoClassDefFoundError: scala/Predef$ java.lang.NoClassDefFoundError: scala/Function0 Error: A JNI error has occurred, please check your installati

    各种报错信息如下: java.lang.NoClassDefFoundError: scala/Function0 at java.lang.Class.getDeclaredMethods0(Nat ...

  9. SVN Hooks的介绍及使用

    阅读此篇文章你可以: 对SVN Hooks有一定的了解 获取两个最常用的SVN Hooks案例 SVN hooks介绍 Hooks 钩子,主要实现的功能就是在特定事件发生之前或者之后自动执行事先定义好 ...

  10. 详解C#特性和反射（二）

    使用反射(Reflection)使得程序在运行过程中可以动态的获取对象或类型的类型信息,然后调用该类型的方法和构造函数,或访问和修改该类型的字段和属性:可以通过晚期绑定技术动态的创建类型的实例:可以获 ...