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

posted @ 2009-02-04 09:37  xjy  阅读(3904)  评论(2编辑  收藏  举报