动态加载、移除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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
微信小程序入门教程
Nov 18 Javascript
angular实现form验证实例代码
Jan 17 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
ant design 日期格式化的实现
Oct 27 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和MySql来与ODBC数据连接
2006/10/09 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php短信接口代码
2016/05/13 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python中拆分字符串的操作方法
2019/07/23 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python脚本调试工具安装过程
2021/01/11 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Europcar意大利:汽车租赁
2019/07/07 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
生产班组长岗位职责
2014/01/05 职场文书
双拥工作宣传标语
2014/06/26 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
法律意见书范本
2015/06/04 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
Python&Matlab实现樱花的绘制
2022/04/07 Python