动态加载、移除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 EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
JS+CSS实现过渡特效
Jan 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
详解Python用户登录接口的方法
2019/04/17 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Django实现文件上传下载
2019/10/06 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
论文指导教师评语
2014/04/28 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
整脏治乱工作简报
2015/07/21 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python