动态加载、移除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 图片轮播(5张图片)
Dec 30 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
vue-iview动态新增和删除的方法
Jun 17 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抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
装潢设计专业推荐信模板
2013/11/26 职场文书
竞职演讲稿范文
2014/01/11 职场文书
毕业生就业意向书
2014/04/01 职场文书
校园运动会广播稿
2014/10/06 职场文书
2015年元旦标语大全
2014/12/09 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
文明上网主题班会
2015/08/14 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python