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 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
jquery实现轮播图特效
Apr 12 jQuery
JavaScript 语句之常用 for 循环详解
Mar 29 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
PHP 读取Postgresql中的数组
2013/04/14 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
Angular封装表单控件及思想总结
2019/12/11 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python实现图片批量剪切示例
2014/03/25 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
深圳茁壮笔试题
2015/05/28 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
建筑人员岗位职责
2013/12/25 职场文书
数控专业自荐书范文
2014/03/16 职场文书
班级读书活动总结
2014/06/30 职场文书
政协会议宣传标语
2014/10/09 职场文书
办理护照工作证明
2014/10/10 职场文书
如何拟写通知正文?
2019/04/02 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
一文搞懂Python Sklearn库使用
2021/08/23 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技