How to tell if the window.onload event has already fired?

Discussion in 'Javascript' started by Brian, Jul 7, 2004.

  1. Brian

    Brian Guest

    Hi everyone,

    I'm writing a function (in javascript) that needs to do one thing if
    the page has not loaded, and another (different) thing if the page has
    already loaded.

    I'm looking for a way to tell if the window.onload event has already
    fired. I cannot edit the onload event handler itself, and my function
    can only exist in an external js file, sourced from the document's
    head section. Any ideas?

    Thanks,
    Brian
    Brian, Jul 7, 2004
    #1
    1. Advertising

  2. Brian

    Blue Raja Guest

    "Brian" <> wrote in message
    news:...
    > Hi everyone,
    >
    > I'm writing a function (in javascript) that needs to do one thing if
    > the page has not loaded, and another (different) thing if the page has
    > already loaded.
    >
    > I'm looking for a way to tell if the window.onload event has already
    > fired. I cannot edit the onload event handler itself, and my function
    > can only exist in an external js file, sourced from the document's
    > head section. Any ideas?


    How about:

    src.js
    [STARTFILE]
    var hasLoaded = false;

    function myfunc(/* param list */){
    if (hasLoaded){
    // do post-load stuff here
    } else {
    // do pre-load stuff here
    }
    }
    [ENDFILE]

    file.html
    [STARTFILE]
    <html>
    <!-- head declaration -->
    <body onload="hasLoaded = true;">
    <!-- body stuff -->
    </body>
    </html>
    [ENDFILE]

    Hope that helps.

    --

    Jason, aka The Blue Raja
    Blue Raja, Jul 8, 2004
    #2
    1. Advertising

  3. Brian

    Brian K Guest

    Thanks, but as I said, I cannot edit the onload event handler itself...



    *** Sent via Devdex http://www.devdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Brian K, Jul 8, 2004
    #3
  4. Brian

    Mick White Guest

    Brian K wrote:
    > Thanks, but as I said, I cannot edit the onload event handler itself...
    >
    >
    >
    > *** Sent via Devdex http://www.devdex.com ***
    > Don't just participate in USENET...get rewarded for it!



    ....
    window.onload=myFunc
    </script>
    </head>
    <body>
    ....


    Mick
    Mick White, Jul 8, 2004
    #4
  5. Brian

    Grant Wagner Guest

    Mick White wrote:

    > Brian K wrote:
    > > Thanks, but as I said, I cannot edit the onload event handler itself...

    > ...
    > window.onload=myFunc
    > </script>
    > </head>
    > <body>
    > ...


    And if the onload event is already defined on the page, that line, if placed
    in the <head>, will be replaced by the onload event defined in the <body>. If
    placed in the <body>, it will replace any existing onload event for the page.

    Injecting code for execution onload when you have no other control over the
    page is problematic at best. The following works in IE6SP1, Firefox 0.9.1,
    Mozilla 1.7, Opera 7.5.2 and Netscape 4.78 on an x86 under Windows XP. I make
    no claims about other browsers on other platforms.

    <head>
    <script type="text/javascript">
    function appendOnloadEvent(eventHandler) {
    if (window.onload) {
    // there is currently an onload event defined for
    // window; append the event handler javascript to
    // the current event handler javascript
    window.onload = new Function(
    // take the original event
    window.onload
    // convert it to a string; the string looks like:
    // "...function...()...{...[js]...}..."
    .toString()
    // remove any newlines or carriage returns
    .replace(/[\r\n]/g, '')
    // remove any leading or trailing whitespace
    .replace(/\s+$|^\s+/g, '')
    // turn "function...()...{...[js]...}"
    // into "function...()...{...[js][newline][new js]...}"
    .replace(
    /^function\s*\w+\s*\(\w*\)\s*\{\s*(.*)\s*\}$/,
    '$1\n' + eventHandler
    )
    );
    } else {
    // there is currently no onload event defined for this
    // window; set the event handler javascript to handle
    // the event
    window.onload = new Function(eventHandler);
    }
    }

    function test() {
    alert('bye');
    }
    </script>
    </head>

    <body onload="alert('hi');">
    <script type="text/javascript">appendOnloadEvent('test();');</script>
    </body>

    But even it requires script injection inside the <body></body> to work
    properly.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Jul 8, 2004
    #5
  6. Brian

    Mick White Guest

    Grant Wagner wrote:

    > Mick White wrote:
    >
    >
    >>Brian K wrote:
    >>
    >>>Thanks, but as I said, I cannot edit the onload event handler itself...

    >>
    >>...
    >> window.onload=myFunc
    >></script>
    >></head>
    >><body>
    >>...

    >
    >
    > And if the onload event is already defined on the page, that line, if placed
    > in the <head>, will be replaced by the onload event defined in the <body>. If
    > placed in the <body>, it will replace any existing onload event for the page.
    >

    I assumed that that the onload event was not pre-assigned.
    See my comments below.


    > Injecting code for execution onload when you have no other control over the
    > page is problematic at best. The following works in IE6SP1, Firefox 0.9.1,
    > Mozilla 1.7, Opera 7.5.2 and Netscape 4.78 on an x86 under Windows XP. I make
    > no claims about other browsers on other platforms.
    >
    > <head>
    > <script type="text/javascript">
    > function appendOnloadEvent(eventHandler) {
    > if (window.onload) {
    > // there is currently an onload event defined for
    > // window; append the event handler javascript to
    > // the current event handler javascript
    > window.onload = new Function(
    > // take the original event
    > window.onload
    > // convert it to a string; the string looks like:
    > // "...function...()...{...[js]...}..."
    > .toString()
    > // remove any newlines or carriage returns
    > .replace(/[\r\n]/g, '')
    > // remove any leading or trailing whitespace
    > .replace(/\s+$|^\s+/g, '')
    > // turn "function...()...{...[js]...}"
    > // into "function...()...{...[js][newline][new js]...}"
    > .replace(
    > /^function\s*\w+\s*\(\w*\)\s*\{\s*(.*)\s*\}$/,
    > '$1\n' + eventHandler


    Grant, this is remarkable, a novel approach, indeed.

    > )
    > );
    > } else {
    > // there is currently no onload event defined for this
    > // window; set the event handler javascript to handle
    > // the event
    > window.onload = new Function(eventHandler);
    > }
    > }
    >
    > function test() {
    > alert('bye');
    > }
    > </script>
    > </head>
    >
    > <body onload="alert('hi');">
    > <script type="text/javascript">appendOnloadEvent('test();');</script>
    > </body>
    >
    > But even it requires script injection inside the <body></body> to work
    > properly.
    >
    > --
    > Grant Wagner <>
    > comp.lang.javascript FAQ - http://jibbering.com/faq
    >
    >
    Mick White, Jul 8, 2004
    #6
  7. Brian

    Lee Guest

    Brian said:
    >
    >Hi everyone,
    >
    >I'm writing a function (in javascript) that needs to do one thing if
    >the page has not loaded, and another (different) thing if the page has
    >already loaded.
    >
    >I'm looking for a way to tell if the window.onload event has already
    >fired. I cannot edit the onload event handler itself, and my function
    >can only exist in an external js file, sourced from the document's
    >head section. Any ideas?


    This seems to work in IE66, Netscape 7.1 and family, and Opera 7.51,
    either in the head or in an external .js file.
    The Mozillas execute the new handler first, the others execute
    it after the original handler.

    <html>
    <head>
    <script type="text/javascript">
    function myHandler(){alert("Loaded")}
    if(window.addEventListener){
    alert("window.addEventListener");
    window.addEventListener("load",myHandler,false);
    }else if(window.attachEvent){
    alert("window.attachEvent");
    window.attachEvent("onload",myHandler);
    }else{
    alert("None of the above");
    }
    </script>
    </head>
    <body onload="alert('original onload handler')">
    <script type="text/javascript">alert("loading")</script>
    done
    </body>
    </html>
    Lee, Jul 9, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jorge
    Replies:
    2
    Views:
    1,253
    jorge
    May 26, 2004
  2. jorge
    Replies:
    1
    Views:
    403
    Teemu Keiski
    May 28, 2004
  3. jorge
    Replies:
    0
    Views:
    317
    jorge
    May 25, 2004
  4. Replies:
    5
    Views:
    251
    Thomas 'PointedEars' Lahn
    May 15, 2005
  5. Matt Kruse
    Replies:
    55
    Views:
    1,238
    David Mark
    Dec 1, 2009
Loading...

Share This Page