如何实现JavaScript动态加载CSS和JS文件


Posted in Javascript onDecember 28, 2020

项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码:

var dynamicLoading = {
 css: function(path){
 if(!path || path.length === 0){
 throw new Error('argument "path" is required !');
 }
 var head = document.getElementsByTagName('head')[0];
 var link = document.createElement('link');
 link.href = path;
 link.rel = 'stylesheet';
 link.type = 'text/css';
 head.appendChild(link);
 },
 js: function(path){
 if(!path || path.length === 0){
 throw new Error('argument "path" is required !');
 }
 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 script.src = path;
 script.type = 'text/javascript';
 head.appendChild(script);
 }
}

对象包含两个完全独立的方法,分别用来加载CSS 文件和JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,是 web 开发人员工作常备代码。

下面是调用代码,异常简单:

//动态加载 CSS 文件
dynamicLoading.css("test.css");

//动态加载 JS 文件
dynamicLoading.js("test.js");

动态加载js和css

开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法。

1、动态加载js

方法一:动态加载js文件

// 动态加载js脚本文件
 function loadScript(url) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = url;
 document.body.appendChild(script);
 }
 // 测试
 loadScript("javascript/lib/cookie.js");

方法二:动态加载js脚本

// 动态加载js脚本
 function loadScriptString(code) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 try{
  // firefox、safari、chrome和Opera
  script.appendChild(document.createTextNode(code));
 }catch(ex) {
  // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
  script.text = code;
 }
 document.body.appendChild(script);
 }
 // 测试
 var text = "function test(){alert('test');}";
 loadScriptString(text);
 test();

2、动态加载css

方法一:动态加载css文件

// 动态加载css文件
 function loadStyles(url) {
 var link = document.createElement("link");
 link.type = "text/css";
 link.rel = "stylesheet";
 link.href = url;
 document.getElementsByTagName("head")[0].appendChild(link);
 }
 // 测试
 loadStyles("css/secondindex.css");

方法二:动态加载css脚本

// 动态加载css脚本
 function loadStyleString(cssText) {
 var style = document.createElement("style");
 style.type = "text/css";
 try{
  // firefox、safari、chrome和Opera
  style.appendChild(document.createTextNode(cssText));
 }catch(ex) {
  // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
  style.styleSheet.cssText = cssText;
 }
 document.getElementsByTagName("head")[0].appendChild(style);
 }
 // 测试
 var css = "body{color:blue;}";
 loadStyleString(css);

以上就是告诉大家如何实现JavaScript动态加载CSS和JS文件,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript算符的优先级介绍
Mar 20 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Vue2 轮播图slide组件实例代码
May 31 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 #Javascript
JS实现的页面自定义滚动条效果
Oct 26 #Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 #Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 #Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python回调函数用法实例分析
2015/05/09 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python相对企业语言优势在哪
2020/06/12 Python
Python过滤序列元素的方法
2020/07/31 Python
Python Django路径配置实现过程解析
2020/11/05 Python
Python 求向量的余弦值操作
2021/03/04 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
服务中心夜班服务员岗位职责
2013/11/27 职场文书
岗位职责说明书
2014/05/07 职场文书
大班亲子运动会方案
2014/06/10 职场文书
法制工作总结2015
2015/07/23 职场文书
学生会部长竞选稿
2015/11/19 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
Mysql文件存储图文详解
2021/06/01 MySQL