動態載入/刪除/更新外部 JavaScript/Css 檔案
來源：互聯網
上載者：User
傳統載入外部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");
