Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don't want to load it again, but if not, you do. This works for that.
Smart Asynchronous Way
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
// warning, global var
thisPageUsingOtherJSLibrary = true;
}
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
// callback function provided as param
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
};
};
head.appendChild(script);
};
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
// Super failsafe - still somehow failed...
} else {
// jQuery loaded! Make sure to use .noConflict just in case
fancyCode();
if (thisPageUsingOtherJSLibrary) {
// Run your jQuery Code
} else {
// Use .noConflict(), then run your jQuery Code
}
}
});
} else { // jQuery was already loaded
// Run your jQuery Code
};
Notice how there is multiple places the jQuery code you intend to run get's called. Don't repeat yourself there, put it in a function you can call to kick things off.
This code was adapted from here.
Document.write way
Hip kids don't use document.write, but if you are too old to care:
var jQueryScriptOutputted = false;
function initJQuery() {
//if the jQuery object isn't available
if (typeof(jQuery) == 'undefined') {
if (! jQueryScriptOutputted) {
//only output the script once..
jQueryScriptOutputted = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
} else {
$(function() {
// do anything that needs to be done on document.ready
// don't really need this dom ready thing if used in footer
});
}
}
initJQuery();
