The Netlobo logo - a Nevada desert landscape

Managing Multiple Javascript window.onload Functions

An easy way to perform multiple window.onload functions so that they do not conflict with each other

Published Mar 14, 2006 by lobo235
Last updated on May 19, 2009

Have you ever run into the situation where you have two (or more) different javascript functions that need to run as soon as your web page is loaded? I have run into this situation numerous times. I work on applications with other developers and sometimes they will tie a function to the window.onload event in one of their .js files effectively replacing mine. I then have to spend some time trying to find a way to incorporate their window.onload function into mine or my window.onload function into theirs. I kept thinking that there had to be a better way to manage the window.onload functions in our applications so I set out to find the better way. This is what I came up with.

The Problem

You can only assign one function to the window.onload event in javascript. Many developers get around this by writing a single function called something like initPage() that calls a whole bunch of other functions. They then assign this initPage() function to the window.onload event and call it good. This works in some situations but in most applications you don't call the same functions on all of your pages when they are loaded. Using the initPage() method does not allow very much flexibility.

Window Onload Manager (WOM) - The Solution

I created the Window Onload Manager or WOM. This short snippet of javascript code will ease your window.onload woes and make your life as a web developer easier. WOM works great when you work with other developers and want to be sure that your window.onloads will always work. The idea behind WOM is that your window.onload functions are added to an array and then one function loops through the array and runs all the functions when the page loads. This is more flexible than the initPage() method because you can add a function to the array whenever you want and you will know that it will always be executed. Here is the code followed by a brief explanation of how it is intended to be used:

/*************************************************************
* Window Onload Manager (WOM) v1.0
* Author: Justin Barlow - www.netlobo.com
*
* Description:
* The WOM library of functions allows you to easily call
* multiple javascript functions when your page loads.
*
* Usage:
* Add functions to WOM using the womAdd() function. Pass the
* name of your functions (with or without parameters) into
* womAdd(). Then call womOn() like this:
* womAdd('hideDiv()');
* womAdd('changeBg("menuopts","#CCCCCC")');
* womOn();
* WOM will now run when your page loads and run all of the
* functions you have added using womAdd()
*************************************************************/

/*************************************************************
* The womOn() function will set the window.onload function to
* be womGo() which will run all of your window.onload
* functions.
*************************************************************/

function womOn(){
  window.onload = womGo;
}
/*************************************************************
* The womGo() function loops through the woms array and
* runs each function in the array.
*************************************************************/

function womGo(){
  for(var i = 0;i < woms.length;i++)
    eval(woms[i]);
}
/*************************************************************
* The womAdd() function will add another function to the woms
* array to be run when the page loads.
*************************************************************/

function womAdd(func){
  woms[woms.length] = func;
}
/*************************************************************
* The woms array holds all of the functions you wish to run
* when the page loads.
*************************************************************/

var woms = new Array();

The functions are rather small so it should be fairly easy to see how they work. The first thing that you do is add functions to WOM using the womAdd() function. After you have added your functions to WOM just call womOn() to make WOM the event handler for the window.onload event. Here is a short example:

womAdd('hideDiv("rightBox")');
womAdd('ajaxInit()');
womAdd('setHandler("tr","mo","onmouseover","rowHightlight")');
womOn();

Now, when your page is loaded, all three functions will be called. Some important things to note are that womOn() can be called as many times as you want without causing problems so call it wherever you need to. Also, the womGo() function is what actually calls all of the functions so if you need to run all of those same functions again after the page has already loaded just make a call to womGo() to run them all again.

Here is the WOM.js file you can download that contains the above code: WOM.js

Here is an example page that uses WOM: WOMexample.html

30 comments for this article.

Other great Web Development and Programming articles on Netlobo.com:
Double Form Submit Problem
Delete Confirmation using Javascript
Showing and Hiding a DIV using CSS and Javascript