动态载入/删除/更新外部 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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
js onclick事件传参讲解
Nov 06 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
Vue异步加载about组件
Oct 31 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
JavaScript实现Tab选项卡切换
Feb 13 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP学习笔记之二
2011/01/17 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
毕业生个人求职信范例分享
2013/12/17 职场文书
学生励志演讲稿
2014/01/06 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
30岁生日感言
2014/01/25 职场文书
元旦联欢会感言
2014/03/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
国企干部对照检查材料
2014/08/22 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书