动态加载、移除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实现公告文字左右滚动的实例代码
Oct 29 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue-cli3单页构建大型项目方案
Apr 07 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
php 读取文件乱码问题
2010/02/20 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
jquery中:input和input的区别分析
2011/07/13 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
什么是TCP/IP
2014/07/27 面试题
幼儿园元旦活动感言
2014/03/02 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
助理政工师申报材料
2014/06/03 职场文书
运动员口号
2014/06/09 职场文书
整改落实自查报告
2014/11/05 职场文书
保研推荐信范文
2015/03/25 职场文书
创业计划书之美甲店
2019/09/20 职场文书
python的变量和简单数字类型详解
2021/09/15 Python
MySQL数据库完全卸载的方法
2022/03/03 MySQL
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
python数字图像处理:图像的绘制
2022/06/28 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers