动态加载、移除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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
Jquery $when done then的用法详解
May 20 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
react-router-dom 嵌套路由的实现
May 02 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
js CSS操作方法集合
2008/10/31 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
innerText 使用示例
2014/01/23 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
python中执行shell的两种方法总结
2017/01/10 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
对numpy中shape的深入理解
2018/06/15 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python生成器用法实例详解
2019/11/22 Python
python 类之间的参数传递方式
2019/12/20 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
值传递还是引用传递
2015/02/08 面试题
节能宣传周活动总结
2014/05/08 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
颐和园导游词400字
2015/01/30 职场文书
护士岗位竞聘书
2015/09/15 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang