The onload handler on a page’s <body> element is the place to do any JavaScript initialization that depends on the page being loaded to proceed. If you have some JavaScript and you’re sure it has no dependencies on the page structure, you can have it called earlier but generally it’s safest to call it in the onload handler. It might look like this
<body onload="ajax_subsys_init();">...
But just as you should use CSS to separate presentation from structure, you should separate behavior from structure as well. And you can do that in javascript by writing to the onload handler directly:
window.onload=ajax_subsys_init;
This is an example of when it’s OK to break the rule prohibiting execution of JavaScript before the onload handler runs. Obviously this must run before the onload handler is called.
This is great because the page’s JavaScript can then take the responsibility for initializing itself. The problem with this approach is, as pages get more complex behaviorally, you might have several overlapping bits of javascript that want to initialize themselves. Then you have
//from inside of ajax.js window.onload=ajax_subsys_init; .... //from inside gui.js window.onload=gui_widgets_init;
The gui widgets initialization routine overwrites the ajax subsystem initialization routine and when onload is called the gui widgets are initialized but the ajax subsystem is not.
So, actually, you can’t let the individual subsystems manage their own initialization, because the last one that does so is the only one that gets called. Your only option is writing your own initialization routine such as
//from inside of ajax.js
window.onload=ajax_subsys_init;
....
//from inside gui.js
window.onload=gui_widgets_init;
....
//inside your page
function page_init(){
ajax_subsys_init();
gui_widgets_init();
}
window.onload=page_init;
Well, that works but, you need to be aware of the initialization requirements of all the javascript libraries you include. If you add a new javascript library you need to change this initialization code.
It is possible to create a javascript class that will allow each javascript subsystem to take responsibility for it’s own initialization and yet not overwrite each other. And here is that class:
function onLoadHandler(init_fxn){
var old_init = window.onload;
var new_init = init_fxn;
window.onload = function(){
if (typeof(old_init)=="function"){
old_init();
}
new_init();
}
return this;
}
Each subsystem that wants to hook into the onload handler can use this class to add their initialization routine to a chain of initialization routines. Here’s how it can be used.
//from inside of ajax.js new onLoadHandler(ajax_subsys_init); .... //from inside gui.js new onLoadHandler(gui_widgets_init);
Now each javascript library can be included and can automatically initialize itself.