Adding Window Onload Events In Javascript

Blog Stats

Posts - 1541
Articles - 6
Comments - 8188
Trackbacks - 3076

<< Adding Mouse Over Row Highlighting To Tables | Home | The Troll Cap >>

Adding Window Onload Events In Javascript

One common approach to having a script method run when a page loads is to attach a method to the window.onload event like so...


window.onload = function() { someCode; }

This is a common approach with methods for enhancing structural markup with Javascript like my table row rollover library, but it suffers from one major problem.

What happens when you include more than one script that does this? Only one of them will be attached to the onload event.

It would be nice if there was a syntax like the C# delegate syntax for attaching an event handler. For example...


window.onload += function() {}  //This doesn’t work

However, there is a better way. In looking at the Lightbox script, I noticed the script references a method written about by Simon Willison. He has a method named addLoadEvent(func); that will append the method to the load event, without interfering with any existing methods set to execute on load.

Read about this technique here.

Print posted @ Sunday, February 05, 2006 6:04 PM

Feedback

# re: Adding Window Onload Events In Javascript

Dude, what about addEventListener (W3C DOM2) and attachEvent (IE)? 2/6/2006 6:56 AM | Dimitri Glazkov

# re: Adding Window Onload Events In Javascript

Which browsers support those approaches? Does IE5? Don't leave us hanging dude! ;) 2/6/2006 9:24 AM | Haacked

# re: Adding Window Onload Events In Javascript

Ok, after a little Googling, there's a big problem with both approaches.

#1 is not supported by many browsers. #2 doesn't properly use a closure so the "this" keyword always refers to window and is totally useless. 2/6/2006 9:27 AM | Haacked

# re: Adding Window Onload Events In Javascript

I'd advise caution and read up on these two links.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp
http://jibbering.com/faq/faq_notes/closures.html

IE remembers all the events attached during it's history and keeps references to DOM objects around even after the page unloads. To be safe, you should probably call window.detachEvent during unload to prevent any memory leaks in IE. Scott Isaacs has an excellent post demonstrating a way to do this.
http://spaces.msn.com/siteexperts/Blog/cns!1pNcL8JwTfkkjv4gg6LkVCpw!338.entry

and I've probably hit the spam filter with all those links. :) 2/6/2006 11:19 AM | Scott

# re: Adding Window Onload Events In Javascript

Thanks Scott! I'll read up on those resources and update this post accordingly when I get a moment. 2/6/2006 11:38 AM | Haacked

# re: Adding Window Onload Events In Javascript

Hello,
You make a function and call it in body onload

or then use the following
window.onload= function()
{
//body of function
}
sur it will work 6/20/2008 10:15 PM | Irfan

# re: Adding Window Onload Events In Javascript

addLoadEvent is a great solution (which is still actual).

Irfan, such a simple solution is not good as it would override existing onload function. 7/18/2008 6:31 AM | freelancer

you've been HAACKED