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.

Comments

11 responses

Dimitri Glazkov • February 5th, 2006
Dude, what about addEventListener (W3C DOM2) and attachEvent (IE)?

Haacked • February 5th, 2006
Which browsers support those approaches? Does IE5? Don't leave us hanging dude! ;)

Haacked • February 5th, 2006
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 • February 6th, 2006
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 • February 6th, 2006
Thanks Scott! I'll read up on those resources and update this post accordingly when I get a moment.

Irfan • June 20th, 2008
Hello,
You make a function and call it in body onload
<script>
function callme()
{
//body of function
}
</script>
<body onload="callme()">
</body>
or then use the following
window.onload= function()
{
//body of function
}
sur it will work

freelancer • July 17th, 2008
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 • December 3rd, 2008
fdgdgdg

none • February 12th, 2011
link is down :(

none • February 12th, 2011
www.webreference.com/.../onloads/

Michael • April 9th, 2013
Hello, I have a script it work in IE but not work in Firefox, can anybody help? thanks a lot. Please see below

<script type="text/JavaScript">
window.onload = function() {
var TTTT = document.getElementById('TTTT');

function click() {
if (event.button==1 || event.button == 2) {alert('WELCOME!')}
}
TTTT.onmousedown=click
}
</script>

<td width="140" height="25" id="TTTT">
</td>