动态载入/删除/更新外部 JavaScript/Css 文件的代码


Posted in Javascript onJuly 03, 2010

动态载入 JavaScript/Csss 文件
传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在<head>标签里面进行添加:

<head> 
<script type="text/javascript" src="myscript.js"></script> 
<link rel="stylesheet" type="text/css" href="main.css" /> 
</head>

这些文件用这种方式会同步加载到当前这个页面。

现在用动态的方式载入JavaScript/Css文件:

用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
设置相应的属性
使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾

function loadjscssfile(filename, filetype){ 
//如果文件类型为 .js ,则创建 script 标签,并设置相应属性 
if (filetype=="js"){ 
var fileref=document.createElement('script'); 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src", filename); 
} 
//如果文件类型为 .css ,则创建 script 标签,并设置相应属性 
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")[0].appendChild(fileref); 
} 
//动态添加一个.js 文件 
loadjscssfile("myscript.js", "js"); 
//像添加.js文件一样,动态添加一个.php文件 
loadjscssfile("javascript.php", "js"); 
//动态一个.css文件 
loadjscssfile("mystyle.css", "css");

为了防止多次载入同一个js/css文件, 添加以下判断(这只是粗略检测)
//临时载入的文件名 
var filesadded=""; function checkloadjscssfile(filename, filetype){ 
if (filesadded.indexOf("["+filename+"]")==-1){ 
loadjscssfile(filename, filetype); 
//把 [filename] 存入 filesadded 
filesadded+="["+filename+"]"; 
} 
else{ 
alert("file already added!"); 
} 
//第一次载入 
checkloadjscssfile("myscript.js", "js"); 
//重复载入同一个文件, 失败 
checkloadjscssfile("myscript.js", "js");

动态删除 JavaScript/Csss 文件
注意:ie6/7 下动态删除样式时有bug. 2种解决方案:1.样式表里不要有import的样式表 2.把link的type属性设置为空值, 然后再修改 href 的地, 或者直接设置href为空, 最后再把type值设置成”text/css” 强制让ie解释新的样式表。

取得相应的 DOM 元素
根据 文件名&文件类型 定位元素
用 DOM removeChild 删除一个 “script” 或者 ”link” 元素

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>=0; i--){ 
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) 
allsuspects[i].parentNode.removeChild(allsuspects[i]); 
} 
} removejscssfile("somescript.js", "js"); 
removejscssfile("somestyle.css", "css");

动态更新 JavaScript/Csss 文件
使用 createElement 创建 要更新的 JavaScript/Css 元素
查找要被替换的元素
用 replaceChild 替换元素
function createjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 
fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
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>=0; i--){ 
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){ 
var newelement=createjscssfile(newfilename, filetype); 
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]); 
} 
} 
} 
//用 "newscript.js" 替换 "oldscript.js" 
replacejscssfile("oldscript.js", "newscript.js", "js"); 
//用 "newscript.css" 替换 "oldscript.css" 
replacejscssfile("oldstyle.css", "newscript.css","css");
Javascript 相关文章推荐
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
Javascript中this的用法详解
Sep 22 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
vue实现评论列表功能
Oct 25 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
JavaScript异步操作中串行和并行
Nov 20 Javascript
一个原生的用户等级的进度条
Jul 03 #Javascript
清空上传控件input file的值
Jul 03 #Javascript
javascript深入理解js闭包
Jul 03 #Javascript
JSON JQUERY模板实现说明
Jul 03 #Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 #Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 #Javascript
IE本地存储userdata的一个bug说明
Jul 01 #Javascript
You might like
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[原创]pip和pygal的安装实例教程
2017/12/07 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python实现电子书翻页小程序
2019/07/23 Python
Python文件路径名的操作方法
2019/10/30 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
如何学习Python time模块
2020/06/03 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
志愿者服务感言
2014/02/27 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL