Dynamically require/include a Javascript file into a page and be notified when its loaded
October 6, 2011 Leave a comment
This is a simple little JavaScript snippet I wrote the other day that basically includes an external javascript file in an HTML page head section.
Its pretty straight forward,
- it first gets a reference to the head tag.
- Creates a script element using document.createElement
- Sets the source/url of the file
- sets the type of the script element to the correct mime type of “text/javascript”
- Then sets the onload property of the script element to a callback function you supply. In i.e. it will check the onreadystatechange and execute the callback function you provide.
- And finally it appends the script element to the head of the page
/**
*Load an externl JS file and append it to the head
*/
function require(file,callback){
var head=document.getElementsByTagName("head")[0];
var script=document.createElement('script');
script.src=file;
script.type='text/javascript';
//real browsers
script.onload=callback;
//Internet explorer
script.onreadystatechange = function() {
if (_this.readyState == 'complete') {
callback();
}
}
head.appendChild(script);
}
Probably a million and one ways to do this but it works decently in I.E 7+,Firefox,Chrome,Safari and Opera