How to dynamically load external CSS and JS files

Dynamically load external CSS and JS files and use dom to create <script> or <link> labels, and attach attributes such as type to them. Then, use the appendChild method to bind the tag to another tag, which is generally bound to

Application:
1. Improve code reuse and reduce the amount of code;
2. Add a javascript controller and session to dynamically change the page style;
3. Because the pages are loaded from top to bottom and explained while loading, you can add a javascript controller to control the loading sequence of page files, such as loading css layout files first, the css beautifying file with images is displayed, and a large falsh file is loaded, or the importance of security content is loaded.

To load. js or. css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "script" or "LINK" element, assign it the appropriate attributes, and finally, use element. appendChild () to add the element to the desired location within the document tree. it sounds a lot more fancy than it really is. lets see how it all comes together:
 
The next step is to bind to the

Document. getElementsByTagName ("head") [0]. appendChild (fileref)

By referencing the HEAD element of the page first and then calling appendChild (), this means the newly created element is added to the very end of the HEAD tag. furthermore, you shoshould be aware that no existing element is harmed in the adding of the new element-that is to say, if you call loadjscssfile ("myscript. js "," js ") twice, you now end up with two new" script "elements both pointing to the same Javascript file. this is problematic only from an efficiency standpoint, as you'll be adding redundant elements to the page and using unnecessary browser memory in the process. A simple way to prevent the same file from being added more than once is to keep track of the files added by loadjscssfile (), and only load a file if it's new:

Var filesadded = "" // Save the array variable of the name of the bound File Function checkloadjscssfile (filename, filetype ){ If (filesadded. indexOf ("[" + filename + "]") =-1) {// indexOf checks whether an item exists in the array. Loadjscssfile (filename, filetype) Filesadded + = "[" + filename + "]" // Add the file name to filesadded } Else Alert ("file already added! ") // Prompt if it already exists } Checkloadjscssfile ("myscript. js", "js") // success Checkloadjscssfile ("myscript. js", "js") // redundant file, so file not added

Here I'm just crudely detecting to see if a file that's set to be added already exists within a list of added files 'names stored in variable filesadded before deciding whether to proceed or not.
OK, moving on, sometimes the situation may require that you actually remove or replace an added. js or. css file. Lets see how that's done next.

Function loadjscssfile (filename, filetype ){ If (filetype = "js") {// determine the file type Var fileref = document. createElement ('script') // create a tag Fileref. setAttribute ("type", "text/javascript") // defines the attribute type value as text/javascript Fileref. setAttribute ("src", filename) // file address } Else if (filetype = "css") {// determine the file type 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) } Loadjscssfile ("myscript. js", "js") // when the page is opened, the browser dynamically loads the file Loadjscssfile ("javascript. php", "js") // when the page is opened, the browser dynamically loads "javascript. php ", Loadjscssfile ("mystyle.css", "css") // the browser's dynamic .css file when opening a page