动态加载、移除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的.animate()函数在IE6下的问题
Dec 03 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
js的三种继承方式详解
Jan 21 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Vue退出登录时清空缓存的实现
Nov 12 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
收音机术语解释
2021/03/01 无线电
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
javascript实现连续赋值
2015/08/10 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
解析vue中的$mount
2017/12/21 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python中Class类用法实例分析
2015/11/12 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python-split()函数实例用法讲解
2020/12/18 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
前厅收银主管岗位职责
2014/02/04 职场文书
党员批评与自我批评
2014/02/12 职场文书
团日活动总结
2014/04/28 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
SQL SERVER触发器详解
2022/02/24 SQL Server