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技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
如何快速上手Vuex
Feb 14 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
深入PHP FTP类的详解
2013/06/13 PHP
php密码生成类实例
2014/09/24 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python设计模式之门面模式简单示例
2018/01/09 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
优秀幼教自荐信
2014/02/03 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
理想演讲稿范文
2014/05/21 职场文书
外联部演讲稿
2014/05/24 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
关于感谢信的范文
2015/01/23 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
初中军训感想
2015/08/07 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS