一 动态脚本

// 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的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. 小技巧——病毒分析中关闭ASLR

    原文来自:https://bbs.ichunqiu.com/thread-41359-1-1.html 病毒分析中关闭ASLR 分析病毒的时候,尽可能用自己比较熟悉的平台,这样可以大大地节省时间,像我 ...

  2. sublime text3: markdown 安装及常用语法简介

    自己上传到 github 上的 README.rdm 文件内容显示没有“美化”,所有内容都挤在一块儿了,很不舒服. 原因是:github 的文档 README.rdm 文件使用 markdown 编辑 ...

  3. Nodejs的模块系统

    global对象 浏览器端JavaScript中的全局对象为"window",在浏览器中定义的变量都会成为"window"对象的属性. 不像浏览器端JavaSc ...

  4. mxonline 总结

    课程相关 课程列表 课程的剪接 课程详情 课程章节 课程关联的授课机构,课程关联的授课教师 热门课程 相关课程推荐 课程留言 需要登录 若未登录,返回到登录页面 留言失败反馈信息 留言成功,异步刷新页 ...

  5. Centos 7 开启BBR

    # 升级内核 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org rpm -Uvh http://www.elrepo.org/elr ...

  6. 匿名类、包、权限修饰符_DAY10

    1:内部类(理解) (1)把类定义在一个类的内部. (2)特点:   A:内部类可以直接使用外部类的成员,包括私有.   B:外部类要使用内部类成员,必须创建对象使用.    例子: public c ...

  7. Hive中的Row_Number()使用

    语法:row_number() over (partition by 字段a order by 计算项b desc ) rank --这里rank是别名 partition by:类似hive的建表, ...

  8. Elasticsearch Java Client连接池

    按照Elasticsearch API,在Java端使用是ES服务需要创建Java Client,但是每一次连接都实例化一个client,对系统的消耗很大,即使在使用完毕之后将client close ...

  9. js中编写velocity逻辑

    <script type="text/javascript"> $(function(){ #foreach( $var in $entity.showConfigs ...

  10. Quartz.NET基础知识概述

    Quartz.NET是什么 由于我现在使用的Quartz.NET2.2版本,相对2.x变化不大,主要是相对于1.x更新了很多东西,如下基础知识摘录网络. Quartz.NET是一个开源的作业调度框架, ...