The conventional way to loading external JavaScript (ie:
.js) and
CSS (ie: .css)
files on a page is to stick a reference to them in the HEAD section
of your page, for example:<head> <script type="text/javascript" src="myscript.js"></script> <link rel="stylesheet" type="text/css" href="main.css" /> </head>
Files that are called this way are added to the page as they
are encountered in the page's source, or synchronously. For the most part,
this setup meets our needs just fine, though in the world of synchronous
Ajax design patterns, the ability to also fire up JavaScript/ CSS on demand
is becoming more and more handy. In this tutorial, lets see how it's done.
Dynamically loading external
JavaScript and CSS files
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:function loadjscssfile(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)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file
| Demo: | "myscript.js" source:var petname="Spotty"
alert("Pet Name: " + petname)
|
"mystyle.css" source:#demotable td{
background-color: lightyellow;
}
#demotable b{
color: blue;
}
|
Since external JavaScript and CSS files can technically end with any custom file extension (ie: "
javascript.php"), the
function parameter "filetype"
lets you tell the script what file type to expect before loading. After
that, the function sets out to create the
element using the appropriate
DOM methods,
assign it the proper attributes, and finally, add it to the end of the HEAD
section. Now, where the created file gets added is worth elaborating on: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 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="" //list of files already added
function checkloadjscssfile(filename, filetype){
if (filesadded.indexOf("["+filename+"]")==-1){
loadjscssfile(filename, filetype)
filesadded+="["+filename+"]" //List of files added in the form "[filename1],[filename2],etc"
}
else
alert("file already added!")
}
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.
No comments :
Post a Comment