Adding Window Onload Events In Javascript

0 comments suggest edit

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.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

11 responses

  1. Avatar for Dimitri Glazkov
    Dimitri Glazkov February 5th, 2006

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

  2. Avatar for Haacked
    Haacked February 5th, 2006

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

  3. Avatar for Haacked
    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.

  4. Avatar for Scott
    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. :)

  5. Avatar for Haacked
    Haacked February 6th, 2006

    Thanks Scott! I'll read up on those resources and update this post accordingly when I get a moment.

  6. Avatar for Irfan
    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

  7. Avatar for freelancer
    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.

  8. Avatar for gfdgfdgdgd
    gfdgfdgdgd December 3rd, 2008

    fdgdgdg

  9. Avatar for none
    none February 12th, 2011

    link is down :(

  10. Avatar for none
    none February 12th, 2011
  11. Avatar for Michael
    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>