动态加载、移除、替换JS和CSS

来源：互联网发布：googlenet 网络结构编辑：程序博客网时间：2024/05/29 02:38

动态加载、移除、替换JS和CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function include_js(file) {
var _doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
_doc.appendChild(js);

var css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', "http://192.192.187.233/ss/css/css.css");

_doc.appendChild(css);

if (!/*@cc_on!@*/0) { //if not IE        //Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
js.onload = function () {
alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');        }    } else {        //IE6、IE7 support js.onreadystatechange
js.onreadystatechange = function () {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
alert('IE6、IE7 support js.onreadystatechange');            }        }    }    return false;}//execution function

include_js('http://www.planabc.net/wp-includes/js/jquery/jquery.js');
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

动态加载、移除、替换js/css文件（转载）

<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")[0].appendChild(fileref)
}

</script>
使用示例：
loadjscssfile("myscript.js", "js")
loadjscssfile("javascript.php", "js")
loadjscssfile("mystyle.css", "css")

<script language="javascript">
//移动已经加载过的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>=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文件，代码如下：
<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>=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])
}
}
}
</script>

使用示例：
replacejscssfile("oldscript.js", "newscript.js", "js")
replacejscssfile("oldstyle.css", "newstyle", "css")