Dynamically load/delete/update the code of external JavaScript/Css files

Dynamically load/delete/update the code of external JavaScript/Css files_javascript skills

WBOY

Release： 2016-05-16 18:23:51

Original

1138 people have browsed it

Dynamically loading JavaScript/Csss files
The traditional method of loading external JavaScript (*.js) or Css (*.css) files is to add them directly in the tag:

Copy code The code is as follows:

These files will be loaded synchronously to the current page in this way.

Now load JavaScript/Css files dynamically:

Create a "script" or "link" element using the DOM createElement method
Set the corresponding attributes
Use appendChild Method, insert the created element at the end of the head tag

Copy the code The code is as follows:

 
 function loadjscssfile(filename, filetype){ 
//If the file type is .js, create a script tag and set the corresponding attributes 
if (filetype=="js"){ 
var fileref=document. createElement('script'); 
fileref.setAttribute("type","text/javascript"); 
fileref.setAttribute("src", filename); 
} 
//if file If the type is .css, create a script tag and set the corresponding attributes 
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); 
} 
//Dynamicly add a .js file
loadjscssfile("myscript .js", "js"); 
//Dynamicly add a .php file just like adding a .js file
loadjscssfile("javascript.php", "js"); 
//Dynamic one .css file 
loadjscssfile("mystyle.css", "css"); 

In order to prevent the same js/css file from being loaded multiple times, add the following judgment (this is just Rough detection)

Copy code The code is as follows:

 
//Temporarily loaded file name
var filesadded=""; 

function checkloadjscssfile(filename, filetype){ 
if (filesadded.indexOf("[" filename "]")==-1){ 
loadjscssfile( filename, filetype); 
//Save [filename] into filesadded 
filesadded ="[" filename "]"; 
} 
else{ 
alert("file already added!" ); 
} 

//Load for the first time
checkloadjscssfile("myscript.js", "js"); 
//Load the same file repeatedly, failed
checkloadjscssfile("myscript.js", "js"); 

Dynamic deletion of JavaScript/Csss files
Note: There is a bug when dynamically deleting styles under ie6/7. 2 types Solution: 1. Do not have an import style sheet in the style sheet. 2. Set the type attribute of the link to a null value, then modify the href location, or directly set the href to null, and finally set the type value to "text/ css" forces IE to interpret the new style sheet.

Get the corresponding DOM element
Locate the element according to the file name & file type
Use DOM removeChild to delete a "script" or "link" element

Copy code The code is as follows:

 
function removejscssfile(filename, filetype){ 
//Judge the file type
var targetelement=(filetype == "js")? "script" : (filetype=="css")? "link" : "none"; 
//Judge the file name
var targetattr=(filetype=="js") ? "src" : (filetype=="css")? "href" : "none"; 
var allsuspects=document.getElementsByTagName(targetelement); 
//Traverse elements and delete matching elements
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"); 

Dynamicly update JavaScript/Csss files
Use createElement to create the JavaScript/Css element
Find the element to be replaced
Replace the element with replaceChild

Copy the code The code is as follows:

 
function createjscssfile(filename, filetype){ 
if (filetype=="js"){ //filename이 외부 JavaScript 파일인 경우 
var fileref=document.createElement('script') 
fileref.setAttribute("type","text/javascript") 
fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ // filename이 외부 CSS 파일인 경우 
var fileref=document.createElement("link") 
fileref.setAttribute("rel", "stylesheet") 
fileref.setAttribute("type", "text/ css") 
fileref.setAttribute("href", filename) 
} 
return fileref 
} 

function replacementjscssfile(oldfilename, newfilename, filetype){ 
var targetelement =(파일 유형=="js")? "스크립트": (filetype=="css")? "링크": "없음"; 
var targetattr=(filetype=="js")? "src": (파일 유형=="css")? "href" : "없음"; 
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"); 