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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
js实现无缝轮播图
Mar 09 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python通过文件头判断文件类型
2015/10/30 Python
Python中pygame安装方法图文详解
2015/11/11 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python读写docx文件的方法
2018/05/08 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python如何实现远程方法调用
2020/08/07 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
积极贯彻学习两会精神总结
2014/03/17 职场文书
介绍信怎么写
2015/01/30 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书