动态加载、移除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 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
使用vue for时为什么要key【推荐】
Jul 11 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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中用正则表达式清除字符串的空白
2011/01/17 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python学生管理系统代码实现
2020/04/05 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python os库常用操作代码汇总
2020/11/03 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
银行资信证明
2015/06/17 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL