动态加载、移除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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
基于php编程规范(详解)
2017/08/17 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
军训自我鉴定
2013/12/14 职场文书
大一军训感言
2014/01/09 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript