PengoWorks.com

Creating Dynamic "onload" Events Using JavaScript
by Dan G. Switzer, II | 06/18/2003

Creating Dynamic "onload" Events

One of the most common things I run into while developing sites dependant on JavaScript is the need to have multiple operations run during <body>'s onload event. I think this is a problem most developers run into, since it's very common to develop a set of "shared border" templates that render the shell of your site and the body of your document is included via a server-side command.

Often you have the need to invoke some JavaScript during the onload event of every page. This might be to render a DHTML-based menu, or simply to initial some information about the page, regardless, you need this information to run on every page.

However, you often run into the case were you need to run some addition commands based upon the page that's being inserted. Most often this happens when I'm developing a page that has a form on it. There are a lot of ways to tackle this problem, but the tip I'm going to share with you is the one that I've found over the years to be the best solution. For a lack of a better term, I'll call this the "Auto-init()" method.

The "Auto-init()" method relies on a basic operator that's been in JavaScript since version 1.1, the "typeof" operator. The concept involves create a default function to run in during the onload event which handles all your site-wide functionality. In addition, the function will then also check the DOM to see there are some specially named functions, and if they are present it'll run execute them.

The first thing you need to do is to set up the base template. In the base template in this example, will be just the bare minimum html template, with the addition of an onload event declaration and a function to invoke during the onload event.

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Auto-init() Example</title> <script language="JavaScript" type="text/javascript">  </script> </head> <body onload="_init();">  <h1> Auto-init() Example </h1> <p> This is some sample content--which normally would be included via a server-side include. </p>  </body> </html>

NOTE: Notice that we named the function "_init" (with an underscore) instead of just "init". This is because we'll build in some hooks to our "_init()" function to check to see if an "init()" function exists.

The next thing we want to do is to modify the _init() function to check for the existence of any specially predefined functions, which can be declared anywhere within your page, which will be executed during the onload event. In my template I build in checks for an "init" function and an "onInit" function.

To check to see if a function exists in a page, you use the typeof operator and check to see if the value equals "function". If the variable is equal to anything else, like "undefined", we'll simply skip trying to execute the function. Here's what the line looks like to test for a function called "init":

Source Code

if( typeof window.init == "function" ) window.init();

Here's what the modified "_init" function should look like after adding or checks to the "init" and "onInit" functions:

Source Code

function _init(){ // insert your site-wide code here alert("this is loaded during the onload:_init() function."); // you typically would run this after all site-wide // execution has processed, but it's really up to // the design of your site to when you may want to run this if( typeof window.init == "function" ) window.init(); // run this after all onLoad functionality has run if( typeof window.onInit == "function" ) window.onInit(); }

At this point, your template should still behave the way it did originally—since we haven't declared either of our special functions. Let's add our functions within our <body> tags to see what happens. Add the following to the code to your template:

Source Code

<script language="JavaScript" type="text/javascript">  </script>

If you save and execute your template now, you'll notice you get all three alert dialog boxes. Your template should look like this:

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Auto-init() Example</title> <script language="JavaScript" type="text/javascript">  </script> </head> <body onload="_init();">  <h1> Auto-init() Example </h1> <p> This is some sample content--which normally would be included via a server-side include. </p> <script language="JavaScript" type="text/javascript">  </script>  </body> </html>

Feel free to play around with the syntax and come up with your own standard. I've found that between declaring an "init()" and "onInit()" function it gives me all the flexibility I need. I've yet to run into a situation where I needed more speciality functions, but if you need to, you could even chain this type of functionality. (For example, you could have your init() function check for an onInitBefore() function and so on.)

I've used this technique for about 5 years now, and found it's the quickest most intuitive method when developing pages. There's no mucking around w/trying to pass server-side variables to my templates to figure out what to run--you just declare the function in your template and move on.

Unlimited init-type functions

If you have a really complex site, where you might have the need to declare any number of init-type functions—like in a fusebox environment—you could use an array to store your init functions. For example:

Source Code

// function to hold all init functions init = new Array(); // this runs on each page function _init(){ // loop through all the items in the init array // and execute any functions for( var i=0; i < window.init.length; i++ ){ if( typeof window.init[i] == "function" ) window.init[i](); } }

Now to declare a new function to run, you'd just do this:

Source Code

window.init[window.init.length] = function (){ alert("my first function"); } window.init[window.init.length] = function (){ alert("my second function"); } // add as many more statement you need, they'll // run in the order they were declared in the page

NOTE: Functions declared in an array like this will execute in order they're defined in the page.

This method would allow you to create an unlimited number of events to run during the onload event, without having to do any server-side manipulation of the source code.

If you have any questions about this article, please feel free to contact the author at dswitzer@pengoworks.com.