动态加载、移除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 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
xmlHTTP实例
2006/10/24 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
学习React中ref的两个demo示例
2018/08/14 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
python2.7 json 转换日期的处理的示例
2018/03/07 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python可以实现栈的结构吗
2020/05/27 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
推荐信格式要求
2014/05/09 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
房产协议书范本2014
2014/09/30 职场文书
英文邀请函
2015/02/02 职场文书
社区节水倡议书
2015/04/29 职场文书
跑出一片天观后感
2015/06/08 职场文书
小学生暑假生活总结
2015/07/13 职场文书
我爱我班主题班会
2015/08/13 职场文书