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

Dynamic Loading of JavaScript/Csss files
The traditional method for loading external JavaScript (*. js) or Css (*. css) files is to add them directly in the Copy codeThe Code is as follows: <Script type = "text/javascript" src = "myscript. js"> </script>
<Link rel = "stylesheet" type = "text/css" href = "main.css"/>
</Head>

These files are synchronously loaded to the current page.

Now load JavaScript/Css files dynamically:

Use the DOM createElement method to create a "script" or "link" element
Set corresponding properties
Use the appendChild method to insert the created element to the end of the head tag.Copy codeThe Code is as follows: function loadjscssfile (filename, filetype ){
// If the file type is. js, the script tag is created and the corresponding attributes are set.
If (filetype = "js "){
Var fileref = document. createElement ('script ');
Fileref. setAttribute ("type", "text/javascript ");
Fileref. setAttribute ("src", filename );
}
// If the file type is. css, the script tag is created and the corresponding attributes are set.
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 );
}
// Add a. js file dynamically
Loadjscssfile ("myscript. js", "js ");
// Add a. php file dynamically just like adding a. js File
Loadjscssfile ("javascript. php", "js ");
// A. CSS file
Loadjscssfile ("mystyle.css", "css ");

To prevent multiple loading of the same js/css file, add the following judgment (this is only a rough check)Copy codeThe Code is as follows: // The name of the file temporarily loaded
Var filesadded = "";

Function checkloadjscssfile (filename, filetype ){
If (filesadded. indexOf ("[" + filename + "]") =-1 ){
Loadjscssfile (filename, filetype );
// Save [filename] To filesadded
Filesadded + = "[" + filename + "]";
}
Else {
Alert ("file already added! ");
}

// First load
Checkloadjscssfile ("myscript. js", "js ");
// Failed to load the same file repeatedly
Checkloadjscssfile ("myscript. js", "js ");

Dynamically Delete JavaScript/Csss files
Note: There is a bug in dynamically deleting styles in ie6/7. two solutions: 1. do not include an import style sheet in the style sheet. 2. set the link type attribute to a null value, modify the href location, or directly set the href to null, finally, set the type value to "text/css" to force ie to explain the new style sheet.

Get the corresponding DOM Element
Locate elements by file name and file type
Use DOM removeChild to delete a "script" or "link" elementCopy codeThe Code is as follows: function removejscssfile (filename, filetype ){
// Determine the file type
Var targetelement = (filetype = "js ")? "Script": (filetype = "css ")? "Link": "none ";
// Determine the file name
Var targetattr = (filetype = "js ")? "Src": (filetype = "css ")? "Href": "none ";
Var allsuspects = document. getElementsByTagName (targetelement );
// Traverse the element and delete the matched element
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 ");

Dynamically update JavaScript/Csss files
Use createElement to create the JavaScript/Css elements to be updated
Find the element to be replaced
ReplaceChildCopy codeThe Code is as follows: 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]);
}
}
}
// Replace "oldscript. js" with "newscript. js"
Replacejscssfile ("oldscript. js", "newscript. js", "js ");
// Replace "oldscript.css" with "newscript.css"
Replacejscssfile ("oldstyle.css", "newscript.css", "css ");