动态加载、移除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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
js style动态设置table高度
Oct 21 Javascript
jquery滚动特效集锦
Jun 03 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
jQuery each和js forEach用法比较
2019/02/27 jQuery
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
django使用xadmin的全局配置详解
2019/11/15 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python如何更新包
2020/06/11 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
自我鉴定思想方面
2013/10/07 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
《花木兰》教学反思
2014/04/09 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
河童之夏观后感
2015/06/11 职场文书
汶川大地震感悟
2015/08/10 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Python中三种花式打印的示例详解
2022/03/19 Python