Adding Window Onload Events In Javascript

• Feb 05, 2006
• 10 Comments
• Print

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...

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...

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.

What others have said

Dimitri Glazkov Feb 05, 2006 10:56 PM

# re: Adding Window Onload Events In Javascript

Dude, what about addEventListener (W3C DOM2) and attachEvent (IE)?

Haacked Feb 06, 2006 1:24 AM

# re: Adding Window Onload Events In Javascript

Which browsers support those approaches? Does IE5? Don't leave us hanging dude! ;)

Haacked Feb 06, 2006 1:27 AM

# 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.

Scott Feb 06, 2006 3:19 AM

# 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. :)

Haacked Feb 06, 2006 3:38 AM

# 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.

Irfan Jun 20, 2008 2:15 PM

# 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

freelancer Jul 17, 2008 10:31 PM

# 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.

gfdgfdgdgd Dec 03, 2008 6:39 PM

# re: Adding Window Onload Events In Javascript

fdgdgdg

none Feb 12, 2011 11:01 PM

# re: Adding Window Onload Events In Javascript

link is down :(

none Feb 12, 2011 11:04 PM

# re: Adding Window Onload Events In Javascript

www.webreference.com/.../onloads/

What do you have to say?

Title:

Name:

Email: (never displayed) (will show your gravatar)

Website:

Comment: Allowed tags: blockquote, a, strong, em, p, u, strike, super, sub, code

Please add 6 and 7 and type the answer here: