In an DHTML solution I've been working on I need to tap into window.onload and append my own function in there. The code looked something like this:

function foo() { alert("foo"); }
window.onload = function() { foo(); }
... more HTML junk ...
function bar() { alert("bar"); }
window.onload = function() { bar(); }

If you run this it will only run the bar() function because it was defined last. Ideally one would want to write something like this in the second chunk of javascript:

function bar() { alert("bar"); }
window.onload = function() { foo(); bar(); }

which when you run it does both alerts but it's unfortunate that the second piece of javascript needs to know about parenting code.

My solution requires that any new work on window.onload takes whatever was there into account before. Here's the solution I came up with. It seems to work fine in Firefox (linux, windows) and Internet Explorer (windows).

What I do is that I create a variable of the current window.onload and call it like any other function. It looks like this:

function bar() { alert("bar"); }
var prev_onload = window.onload;
window.onload = function() { prev_onload(); bar(); }

The advantage here is that in the second piece of code which can come from anywhere on the server, you do not need to know anything about what happened before in the document. This makes it very convenient when writing a very modular website with widgets coming in from different places. Try it if it works on your computer

What do people think?

Ian Bicking - 08 June 2005 [«« Reply to this]
But does it leak memory on IE? I suspect it does...
Peter Bengtsson - 08 June 2005 [«« Reply to this]
"suspect". I can only hope it won't. How can I test it without actually using a windows computer for more than 5 minutes?
Rob - 10 June 2005 [«« Reply to this]
*gasps in horror* That happens? Is there no garbage collector?
Rick Hurst - 08 June 2005 [«« Reply to this]
If my understanding is correct, the problem you are trying to solve is that there are various functions that need to be fired by window onload, but these are contained in various widgets and macros so you never know which ones and how many will need to be fired?

The way I would approach it is something like this:-

I would have a page variable "str_onload_functions" to store a string. There would also be a function called fn_add_onload_function_name which would append function names, (as strings, probably seperated by commas) to str_onload_functions. each time you have a widget or macro that needs to add a new window.onload function fired, you would pass it the function name as a string. Then (hmm.. this is starting to sound overcomplicated at this point!) there would be a function somewhere omnipresent called fn_execute_onload_functions that would look at str_onload_functions and if it isn't empty, split the string into an array and loop through using exec() to fire each one. then you would just have one call to window.onload which fires fn_execute_onload_functions

This way you would only be storing a string in memory... or maybe you would just add the names directly to an array so you don't need to split it up later

my two pence worth :-)
Peter Bengtsson - 16 June 2005 [«« Reply to this]
Just tested. This works fine in Konquerer
Jason Kummerl - 11 July 2005 [«« Reply to this]
You need to check if prev_onload is null.

window.onload = function() { if ( prev_onload) {prev_onload();} bar(); }
Peter Bengtsson - 11 July 2005 [«« Reply to this]
Are you sure, isn't window.onload always an object?
Jason Kummerl - 12 July 2005 [«« Reply to this]
Yes because if you have not defined window.onload before you grab is using 'var prev_onload = window.onload;' prev_onload will be null instead of a function.
www.AndrewTaylor.EU - 27 September 2009 [«« Reply to this]
Thank you! You helped me clarify how to perform a function on page load!

window.onload = function() { foo(); }

Your email will never ever be published