动态加载、移除js、css
本文简单介绍动态加载、移除、替换js/css文件 。有时候我们在写前端的时候,会有出现需要动态加载一些东如css js 这样能减轻用户加载负担,从而提高响应效率。下面贴出代码。
//JS写法
<script language="JavaScript"> //动态加载一个js/css文件 function loadjscssfile(filename, filetype){ if (filetype=="js"){ var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src",filename) } else if (filetype=="css"){ var fileref=document.createElement("link") fileref.setAttribute("rel","stylesheet") fileref.setAttribute("type","text/css") fileref.setAttribute("href",filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[].appendChild(fileref) } 使用示例: loadjscssfile("myscript.js","js") loadjscssfile("javascript.PHP","js") loadjscssfile("mystyle.css","css") </script> //jquery加载css
$('#btn').click(function()
{
$('head').children(':last').attr({
rel: "stylesheet",
type: 'text/css',
href: './style.css',
});
})
//jquery加载js $.getScript("index.js");//直接加载 //当加载完成之后需要进行后续操作,可利用callback实现 $.getScript("test.js", function() {
console.log('success')
}); $.getScript()//也可利用done的方式判断js文件是否加载成功 $.getScript("test.js").done(function() {
console.log('success')
});
//动态移除
//移动已经加载过的js/css function removejscssfile(filename,filetype){ var targetelement=(filetype=="js")? "script" :(filetype=="css")? "link" : "none" var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none" var allsuspects=document.getElementsByTagName(targetelement) for (var i=allsuspects.length; i>=;i--){ if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-) allsuspects[i].parentNode.removeChild(allsuspects[i]) } } </script> 使用示例: removejscssfile("somescript.js","js") removejscssfile("somestyle.css","css")
替换已经加载的js/css文件,代码如下: <script language="javascript"> function createjscssfile(filename,filetype){ if (filetype=="js"){ var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src",filename) } else if (filetype=="css"){ var fileref=document.createElement("link") fileref.setAttribute("rel","stylesheet") fileref.setAttribute("type","text/css") fileref.setAttribute("href",filename) } return fileref } function replacejscssfile(oldfilename,newfilename, filetype){ var targetelement=(filetype=="js")?"script" : (filetype=="css")? "link" :"none" var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none" var allsuspects=document.getElementsByTagName(targetelement) for (var i=allsuspects.length; i>=;i--){ if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null &&allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-){ var newelement=createjscssfile(newfilename, filetype) allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]) } } }
</script>
---------------------
作者:CG-Jun
来源:CSDN
原文:https://blog.csdn.net/m0_37950366/article/details/70207389
版权声明:本文为博主原创文章,转载请附上博文链接!
动态加载、移除js、css的更多相关文章
- 动态加载 移除js file
动态加载.移除.替换js/css文件 stylesheetjavascriptcssfunctionnull <script language="javascript"> ...
- JavaScript动态加载资源【js|css】示例代码
在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...
- 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件
原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...
- Thymeleaf模板引擎绕过浏览器缓存加载静态资源js,css文件
浏览器会缓存相同文件名的css样式表或者javascript文件.这给我们调试带来了障碍,好多时候修改的代码不能在浏览器正确显示. 静态常见的加载代码如下: <link rel="st ...
- 配置动态加载模块和js分模块打包,生产环境和开发环境公共常量配置
1. 话不多少 先上代码: route.js // 引用模板 分模块编译 const main = r => require.ensure([], () => r(require('. ...
- 网站更换服务器出现加载不了js css文件的问题
原因是 里面加找不到.woff类型,后面把上面注释掉就可以了
- jQuery动态加载动画spin.js
在线演示 本地下载
- 动态加载、移除、替换JS和CSS
//动态加载一个js/css文件 function loadjscssfile(filename, filetype) { if (filetype == "js") { var ...
- 用JavaScript动态加载CSS和JS文件
本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...
随机推荐
- win7共享打印机如何设置,xp系统如何连接共享打印机。
一.xp如何连接win7共享打印机——连接win7共享打印机出现“禁用当前的账户”怎么办 保证xp和win7在同一局域网内.然后在xp电脑中打开[运行],输入win7电脑的ip地址.比如,我的办公 ...
- smartgit的安装
smartgit是非常好用的一个图形化git工具,有Ubuntu版本的,直接去官网下载即可,但使用smartgit要求先jre. 直接去官网上下载jre:https://www.java.com/zh ...
- eclipse中,将springboot项目打成jar包
1.右击项目,选择Run As - Maven clean 2.右击项目,选择Run As - Maven install 3.成功后 会在项目的target文件夹下生成jar包 4.将打包好的jar ...
- Keepalived+LVS实现高可用负载均衡双主模式
LVS是一种集群(Cluster)技术:采用IP负载均衡技术和基于内容请求分发技术.调度器具有很好的吞吐率,将请求均衡地转移到不同的服务器上执行,且调度器自动屏蔽掉服务器的故障,从而将一组服务器构成一 ...
- uboot下读取flash,上传tftp服务器、下载
上传 setenv gatewayip 192.168.1.1; setenv serverip 192.168.1.7; setenv ipaddr 192.168.1.156 ; mw.b 0x8 ...
- django中多个app放入同一文件夹apps
开发IDE:pycharm 新建一个apps文件夹 需要整理的app文件夹拖到同一个文件夹中,即apps.(弹出对话框,取消勾选Search for references) 在pycharm 中,右键 ...
- Eclipse配置Python的IDE
我第一个用来实际应用的编程语言是Java,于是对Eclipse情有独钟.但是自从上手了Notepad++后,使用Eclipse的机会越来越少. 最近开始学习Python,因为对Python不太熟悉,有 ...
- greendao3.2.0使用
源代码地址 https://github.com/greenrobot/greenDAO buildscript { repositories { jcenter() mavenCentral() } ...
- 知识点:Mysql 基本用法之流程控制
流程控制 一. 条件语句 if 语句实例: delimiter // CREATE PROCEDURE proc_if () BEGIN declare i int default 0; if i = ...
- 基于CentOS搭建个人Leanote云笔记本
Leanote 依赖 MongoDB 作为数据存储,下面开始安装MongoDB: 1. 下载启动 MongoDB 下载 MongoDB 进入 /home 目录,并下载 MongoDB: cd /hom ...