Dynamically load external CSS or JS files

Principle Resolution: First step: Use DOM to create <script> or <link> tags, and give them additional properties, such as type, step two: Use the AppendChild method to bind tags to another label, usually tied to

Application: 1, improve the reuse of code, reduce the amount of code; 2, add a JavaScript controller and session can be implemented dynamically change the page style, 3, because the page is from top to bottom loading files, and the side load side explained, So you can add JavaScript Controller control page file loading order, such as the first load CSS layout file, and then show a picture of the CSS to beautify the file, then load a large falsh file, or the importance of the contents of the load. R

Reading tip: E-Bad beginners can see the Chinese directly, and then copy the code test. R

To load a. js or. css file dynamically, in a nutshell, it means the using DOM methods to a swanky new "script" or "LINK" element, assign it the appropriate attributes, and finally, use Element.appendchild () to add the element to the de Sired location within the document tree. It sounds a lot more fancy than it really is. Lets the It all comes together:

function loadjscssfile (filename, filetype) { if (filetype== "JS") {//Decision file type var fileref=document.createelement (' script ')//Create label Fileref.setattribute ("type", "Text/javascript")//defines the value of the property type as Text/javascript Address of Fileref.setattribute ("src", filename)//File } else if (filetype== "CSS") {//Decision 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")//Browser dynamic loading file when opening page
Loadjscssfile ("javascript.php", "JS")//Open the page when the browser dynamically loaded "javascript.php",
Loadjscssfile ("Mystyle.css", "CSS")//The browser dynamically loads when the page is opened. css File

The next step is to bind to the

In this case we can add a global array variable, the binding file name stored in the inside, each binding before the first check if there is already, if there is a hint already exist, if not exist on the binding. R

document.getElementsByTagName ("Head") [0].appendchild (FileRef)

By referencing the head element of the page A and then calling AppendChild (), this means the newly created element is Added to the "very end of the" head tag. Furthermore, you should are aware that no existing element are harmed in the adding of the the new element-that are to say, if Y OU call Loadjscssfile ("Myscript.js", "JS") twice, and you are now-end-with-two new "script" elements both to the pointing Javascript file. This is problematic only a efficiency standpoint, as you'll be adding redundant elements to the page and using Unnec Essary Browser Memory in the process. A simple way to prevent the same file from being added more than once be to keep track of the files added by Loadjscssfile (), and only load a file if it ' s new:

By referencing the head element of the page A and then calling AppendChild (), this means the newly created element is Added to the "very end of the" head tag. Furthermore, you should are aware that no existing element are harmed in the adding of the the new element-that are to say, if Y OU call Loadjscssfile ("Myscript.js", "JS") twice, and you are now-end-with-two new "script" elements both to the pointing Javascript file. This is problematic only a efficiency standpoint, as you'll be adding redundant elements to the page and using Unnec Essary Browser Memory in the process. A simple way to prevent the same file from being added more than once be to keep track of the files added by Loadjscssfile (), and only load a file if it ' s new:

Here I ' m just crudely detecting to the If a file that ' s set to be added already exists within a list of added files ' na Mes stored in variable filesadded before deciding whether to proceed or.
Ok, moving on, sometimes the "situation may require" you actually remove or replace a added. js or. css file. Lets you to do next.