[转]动态加载、移除、替换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")

尊重源作者权益将原文地址附上:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml