动态加载、移除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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
May 11 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JavaScript File分段上传
Mar 10 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
德生PL330测评
2021/03/02 无线电
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php开启openssl的方法
2014/05/15 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python实现栈的方法
2015/05/26 Python
Python作用域用法实例详解
2016/03/15 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
柯基袜:Corgi Socks
2017/01/26 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
项目副经理岗位职责
2013/12/30 职场文书
交通事故调解协议书
2014/04/16 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
党员自我评价范文2015
2015/03/03 职场文书
电影圆明园观后感
2015/06/03 职场文书
会议简讯范文
2015/07/20 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL