如何实现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 11 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 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中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
js判断屏幕分辨率的代码
2013/07/16 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
node.js入门教程
2014/06/01 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python中引用与复制用法实例分析
2015/06/04 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
独特的python循环语句
2016/11/20 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python实现批量注册网站用户的示例
2019/02/22 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
python 模拟登陆github的示例
2020/12/04 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
小学生寒假家长评语
2014/04/16 职场文书
初二学习计划书范文
2014/04/27 职场文书
小学清明节活动总结
2014/07/04 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
电台广播稿范文
2015/08/19 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书