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 相关文章推荐
JQuery验证工具类搜集整理
Jan 16 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
js实现简单进度条效果
Mar 25 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
详解js类型判断
2018/05/22 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
机械专业毕业生推荐信范文
2013/11/25 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
电工技术比武方案
2014/05/11 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
python数字类型和占位符详情
2022/03/13 Python