JavaScript 动态加载脚本和样式的方法


Posted in Javascript onApril 13, 2015

一 动态脚本

当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的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 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 #Javascript
JavaScript DOM操作表格及样式
Apr 13 #Javascript
JavaScript DOM进阶方法
Apr 13 #Javascript
JavaScript DOM基础
Apr 13 #Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 #Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 #Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/12/06 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
原生js实现日历效果
2020/03/02 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python @property原理解析和用法实例
2020/02/11 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
业务员岗位职责范本
2013/12/15 职场文书
公司企业表扬信
2014/01/11 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
给老师的检讨书
2014/02/11 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL