Dynamic loading of external JavaScript (.js) files

via XMLHTTPRequest

The below way for Mozilla works fine, I think the IE way still has some problems, it's not really tested (I am simply too lazy to switch from my Powerbook to Windows :-) ). Find a crossbrowser XMLHTTPRequest here.

// Mozilla and alike load like this
if (window.XMLHttpRequest) {    
    req = new XMLHttpRequest();    
    //FIXXXXME if there are network errors the loading will hang, since it is not done asynchronous since    
    // we want to work with the script right after having loaded it    
    req.open("GET",fullUrl,false); // true= asynch, false=wait until loaded    
    req.send(null);
} else if (window.ActiveXObject) {    
    req = new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP");
    if (req) {
        req.open("GET", fullUrl, false);
        req.send();
    }
}
if (req!==false) {
    if (req.status==200) {
        // eval the code in the global space (man this has cost me time to figure out how to do it grrr)                
        window.eval(req.responseText);
    } else if (req.status==404) {
        // you can do error handling here
    }
}

This is a really cool way to do the loading, but:
* the ActiveX component can be turned off in IE, then it fails (and we had that problem at a customers)
* if the script you want to load is not available for some reason this loading script will simply hang, since it doesn't load asynchronous ... that sucks big time, some kind of fallback mechanism is needed here, but how when you got stuck :-)
* the eval() at the end is something that makes cold shivers go down my back ... any ideas to replace that?
* on errors you don't get the proper line numbers, it always tells you the file that loaded the external file and some obstruse line number, really annoying

via DOM loading of script tag

Very simple and straight forward, but I had to search the web for this simple idea too :-)

var e = document.createElement("script");
e.src = fullUrl;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);

The problem here is that Firefox (I tested 1.0.1) does not wait until the external file is completely loaded, it does that in some parallel thread it seems. But you can catch that with e.onload, which again sucks if you want to simply put a require() in the code (may be I should try to write some tricky, weird while-loop which sleeps inside until the script is loaded, but that sounds like sticking my hands into mud).
But on the other hand Opera 8 (on Windows) waits nicely until the script is loaded.
If I remember right I didn't play much in IE with it (note to myself: do it!).
I tested that in all the browser by simply loading a script which defines a function, and if I call the function right after loading the script and it doesn't bring an "Undefined function" error, I assumed that the loading was synched :-) no magic here.

To catch if the loading is done there are two ways:
* for IE you can use onreadystatechange which is just the same as for the XMLHTTPRequest, MS just enabled that for many more elements
* in FireFox it works with the above mentioned onload

via an iframe and it's src attribute

... todo

via document.write()

Not even an example, since that is something we don't do anymore :-)

Conclusion

Combine all the ways mentioned here and you get a version which works on all the browsers, I will implement it soon I hope and I will keep you updated, just watch here.
I will do it like this:
* for IE - create script element and wait until loaded using onreadystatechanged (to be able use when ActiveX is off)
* for Mozilla and the others - create script element and wait until loaded using onload event
* in Opera - simply load it via creation of script, it seems to wait until the file is loaded, cool
If the while-loop that waits for the readyState/onload to say "file loaded" doesn't work as I expect it then I will probably have to go back to the XMLHTTPRequest way.