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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
React优化子组件render的使用
May 12 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue如何使用外部特殊字体的操作
Jul 30 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
收音机术语解释
2021/03/01 无线电
PHP日期处理函数 整型日期格式
2011/01/12 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python strip()函数 介绍
2013/05/24 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
复古服装:RetroStage
2019/05/10 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
工程管理专业个人求职信范文
2013/12/07 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
博士导师推荐信
2015/03/25 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS