动态加载、移除js/css文件的示例代码


Posted in Javascript onMarch 20, 2018

本文简单介绍动态加载、移除、替换js/css文件 。有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率。下面贴出代码。

<script language="JavaScript">
//动态加载一个js/css文件
function loadjscssfile(filename, filetype){
if (filetype=="js"){
varfileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src",filename)
}
else if (filetype=="css"){
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>

使用示例:

loadjscssfile("myscript.js","js")
loadjscssfile("javascript.PHP","js")
loadjscssfile("mystyle.css","css")
<scriptlanguage="javascript">
//移动已经加载过的js/css
function removejscssfile(filename,filetype){
vartargetelement=(filetype=="js")? "script" :(filetype=="css")? "link" : "none"
var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none"
varallsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0;i--){
if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
 allsuspects[i].parentNode.removeChild(allsuspects[i])
}
}
</script>

 使用示例:

removejscssfile("somescript.js","js")
removejscssfile("somestyle.css","css")

总结

以上所述是小编给大家介绍的动态加载、移除js/css文件的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 #Javascript
浅谈Node 调试工具入门教程
Mar 20 #Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 #Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
关于vue面试题汇总
Mar 20 #Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 #Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 #Javascript
You might like
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python文件与目录操作实例详解
2016/02/22 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python编写猜数字小游戏
2019/10/06 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
政府采购方案
2014/06/12 职场文书
工资收入证明
2014/10/07 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
典型事迹材料范文
2014/12/29 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书