动态加载js,css
2024-08-21 12:39:53
今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码:
var dynamicLoading = {
css: function(path){
if(!path || path.length === ){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[];
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 === ){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[];
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");
这里还提供了本文的 demo ,下载、解压,如果一切正常,打开 HTML 文件,页面将弹出对话框,并呈现鲜艳的红色,这说明它已经成功地动态加载了外部的 CSS 和 JS 文件。
最新文章
- Linux-ssh配置
- TestNG Assert 详解
- linux下根据进程名字获取PID,类似pidof(转)
- tyvj1098[luogu 2365]任务安排 batch
- Linux root 密码重置与用户管理
- Cheatsheet: 2013 07.01 ~ 07.08
- uboot总结:uboot配置和启动过程3(config.mk分析)
- 使用PHPExcel导入导出excel格式文件
- A+B II
- ASM时的OFM特性对影的建数据文件名称的影响及为SYSTEM表空间的数据文件使用别名
- 关于Arduino 步进电机Stepper库的一些想法
- iOS开发——打电话
- http://codeforces.com/problemset/problem/847/E
- bzoj 2440 (莫比乌斯函数)
- 初始化mysql数据库——Activiti BPM
- Docker: 快速搭建LNMP网站平台
- equals方法中变量在前和在后的区别
- 东芝发布运行Win 10的AR眼镜,它和Google Glass企业版有哪些异同?
- archlinux上安装sublime text
- 数据结构与算法JavaScript描述——栈