I have been doing a lot of cross-browser javascript coding in the past 6 months. It’s not fun, very miserable in fact. Most of the time, Firefox, Safari and Opera work without much effort and differences between the 3. However, throw IE into the mix and you’re in a whole different world. Most people don’t really appreciate how much different - and non-compliant - Microsoft’s browser(s) are. In fact, IE6 is probably 100 times worse than IE7. But, IE7 has it’s own problems as well.

Here’s how you can dynamically load an external javascript source file at runtime (from javascript). This is helpful if you need to dynamically inject javascript. And, the biggest problem was setting a function that you want executed after the script is loaded. Normally, this is done by setting the onload property to a javascript function which will be invoked after the external javascript file is loaded. However, like most things MSIE, you have to do it a little differently.

Here’s the cross-browser code:


var script = document.createElement('script');
script.setAttribute('src','myjavascriptfile.js');
script.setAttribute('type','text/javascript');
var loaded = false;
var loadFunction = function()
{
if (loaded) return;
loaded=true;
// your code goes here
alert('your JS file is now loaded');
};
script.onload = loadFunction;
script.onreadystatechange = loadFunction;


On all browsers except IE, onload works properly. However, on IE, you’ll need to use the property onreadystatechange.

I’ve tested this on the following browsers:

Safari - Mac and Windows
Opera - Mac and Windows
Firefox - Mac and Windows
Camino - Mac
IE6/IE7 - Windows

technorati tags: javascript, crossbrowser