Principle analysis: Step 1: Use DOM to create <script> or <link> tags, and attach attributes to them, such as type. Step 2: 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. Reading tip: Beginners who are not good at e-writing can read Chinese directly, and then copy the code and try it out. 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: Here is a quote: loadjscssfile("myscript.js", "js") //The browser dynamically loads the file when the page is opened. In this case, 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. Here is a quote: Here is a quote: 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 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 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("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.
The next job is to bind to the <head> tag. One problem when binding is that the same file may be bound twice by us. There will be no exception if the browser is bound twice, but the efficiency will be low. in order to avoid
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
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.