动态加载、删除与更新外部 JavaScript 和 CSS 文件的方法

动态加载外部资源

动态加载 JavaScript 或 CSS 文件

传统方式是在 HTML 的 <head> 标签中直接引入外部 JavaScript（*.js）或 CSS（*.css）文件。

 
<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" 元素。

接着，为该元素设置相应的属性（如 src、href、type 等）。

最后，使用 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，则创建 link 标签，并设置相应属性
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 或 CSS 文件

注意：在 IE6/7 下动态删除样式时可能存在 bug。有两种解决方案：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 或 CSS 文件

使用 createElement 创建要更新的 JavaScript 或 CSS 元素。

查找需要被替换的旧元素。

使用 replaceChild 方法替换旧元素。

 
function createjscssfile(filename, filetype){
if (filetype=="js"){ // 如果文件名是外部 JavaScript 文件
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
} 
}else if (filetype=="css"){ // 如果文件名是外部 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>=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" 替换 "oldstyle.css"
replacejscssfile("oldstyle.css", "newscript.css","css");