Dynamically load external CSS and JS files using DOM to create <script> or <link> tags and attach attributes to them, such as type, etc. Then use the appendChild method to bind the tag to another tag, usually to <head>.
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. Since the page loads files sequentially from top to bottom and explains them while loading, you can add a JavaScript controller to control the loading order of page files. For example, load the CSS layout file first, and then display the CSS beautification file with pictures. Then load the large falsh file, or load it according to the importance of the content.
To load a .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 job is to bind to the <head> tag. One problem when binding is that the same file may be bound twice. There will be no exception if the browser is bound twice, but the efficiency will be low. In order to avoid this situation, we can add a new global array variable and save the name of the bound file in it. Before each binding, check whether it already exists. If it exists, it will prompt that it already exists. If it does not exist, bind it.
| document.getElementsByTagName("head")[0].appendChild(fileref) |
By referring 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 should 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 that has bound file names function checkloadjscssfile(filename, filetype){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf determines whether there is an item 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 |
function loadjscssfile(filename, filetype){ if (filetype=="js"){ //Determine the file type var fileref=document.createElement('script')//Create tag fileref.setAttribute("type","text/javascript")//Define the value of attribute type as text/javascript fileref.setAttribute("src", filename)//The address of the file } else if (filetype=="css"){ //Determine 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") //The browser dynamically loads the file when the page is opened. loadjscssfile("javascript.php", "js") // The browser dynamically loads "javascript.php" when the page is opened. loadjscssfile("mystyle.css", "css") //The browser dynamically loads the .css file when the page is opened. |