Capture browser refresh using OnBeforeUnload event

Discussion in 'Javascript' started by Jayesh Modha, Feb 18, 2010.

  1. Jayesh Modha

    Jayesh Modha Guest

    Hi,

    I need to give a warning message when the user is trying to refresh
    (either by F5 / CTRL + F5 or by reload from the context menu) the
    window. If the user is closing the window, it is fine, no need to give
    any warning.

    For this purpose I am using OnBeforeUnload event but OnBeforeUnload
    also gets fired on closing the window. I can detect if the window is
    getting closed but it works only for IE not for Firefox or any other
    browser. I found out that those properties are specific to IE DOM
    properties not W3C DOM properties.

    However, I am still interested to figuring this out this for Firefox.
    The clientY is defined during other events (OnMouseDown, etc) but is
    undefined within the OnBeforeUnload event which is the reason my code
    isn't working. Does anyone know any another way to capture this?

    I even tried OnMouseDown even to see if I can capture the mouse
    location when the user is clicking on X Close button, but the attempt
    wasn’t successful.

    I am open to any other ideas/suggestions you may have which works for
    all browsers.

    Here's my code
    -------------------------------------------------------------------
    var tryingToReload = false;
    window.onbeforeunload = function(e) //on before unload
    {
    if (!e) //Firefox and Safari gets argument directly.
    {
    e = window.event; // this is for IE
    }

    if (e.clientY != undefined && e.clientY < 0) // clicked on the close
    button for IE
    {
    tryingToReload = false;
    }

    if (e.clientY != undefined && (e.clientY > 100 && e.clientY < 140)) //
    select close from context menu from the right click on title bar on IE
    {
    tryingToReload = false;
    }

    if (tryingToReload) //user hasn't clicked on X close button or hasn't
    selected close from context menu
    {
    tryingToReload = false;
    return "warning message goes here";
    }
    }

    document.onkeydown = function(e) //attach to key down event to detect
    the F5 key
    {
    tryingToReload = false;

    if (!e) //Firefox and Safari gets argument directly.
    {
    e = window.event;
    }

    var key = e.keyCode ? e.keyCode : e.which;

    try //try
    {
    if (key == 116) //F5 Key detected
    {
    tryingToReload = true;
    }
    }
    catch (ex) { }
    }

    document.oncontextmenu = function(e) //check for the right click
    {
    //cannot blindly say tryingToReload = true as the context menu doesn't
    have refresh/reload options on all the elments.
    //reload options doesn't appear on image, anchor tag, it does appear
    on body, td and div tag in this case

    var srcElement = getEventSrc(e);

    var tagName = '';
    if (srcElement.tagName != undefined) //Get the name of the tag
    {
    tagName = srcElement.tagName;
    }

    switch (tagName)
    {
    case "BODY":
    case "TD":
    case "DIV":
    {
    tryingToReload = true;
    break;
    }
    default:
    break;
    }
    }

    function getEventSrc(e)
    {
    if (this.Event)
    {
    var targ = e.target;
    //nodeType of 1 means ELEMENT_NODE
    return targ.nodeType == 1 ? targ : targ.parentNode;
    }
    else //this is for IE
    return event.srcElement;
    }

    document.onclick = function(e) //clicked anywhere else, you are not
    trying to reload
    {
    tryingToReload = false;
    }
    -------------------------------------------------------------------
    Really appreciated you looking into my post. Thanks for your time.

    Thanks,
    Jayesh Modha
     
    Jayesh Modha, Feb 18, 2010
    #1
    1. Advertising

  2. Jayesh Modha

    Scott Sauyet Guest

    On Feb 17, 8:07 pm, Jayesh Modha <> wrote:
    > I need to give a warning message when the user is trying to refresh
    > (either by F5 / CTRL + F5 or by reload from the context menu) the
    > window. If the user is closing the window, it is fine, no need to give
    > any warning.


    I was hoping someone with more specific knowledge would respond.

    My guess -- and it is only a guess -- is that there will be no way in
    general to determine if the page is unloaded for a refresh or for a
    browser window close. It just doesn't seem like a thing that the
    browser makers would feel a need to expose, and might in fact reveal
    more of the user's behavior than wanted.

    I'd be interested to be proven wrong, but that's my guess.

    Good luck,

    -- Scott
     
    Scott Sauyet, Feb 18, 2010
    #2
    1. Advertising

  3. Jayesh Modha

    Jayesh Modha Guest

    Scott,

    Thanks a lot for your response. Really appreciate you looking into
    this.
    I am also thinking the same that browser would not expose a direct way
    to tell difference between window refresh and window close.
    However, if you look at my code above, we can specifically tell
    difference between F5/CTRL+F5 refresh and window close. It also works
    across all the browsers.

    There is only one condition which is not working for me with my above
    code.

    If you right click on the window, then after you don't select refresh/
    reload option and instead you close the window or you right click on
    the title bar and close window from the context menu.
    My above code doesn't work in that condition as I am not able to
    detect the location of the click anyhow. It works just fine with IE as
    it is giving you location of click and all other browser gives
    undefined value for clientY property.

    Hopefully I would get a solution.

    On Feb 18, 6:38 am, Scott Sauyet <> wrote:
    > On Feb 17, 8:07 pm, Jayesh Modha <> wrote:
    >
    > > I need to give a warning message when the user is trying to refresh
    > > (either by F5 / CTRL + F5 or by reload from the context menu) the
    > > window. If the user is closing the window, it is fine, no need to give
    > > any warning.

    >
    > I was hoping someone with more specific knowledge would respond.
    >
    > My guess -- and it is only a guess -- is that there will be no way in
    > general to determine if the page is unloaded for a refresh or for a
    > browser window close.  It just doesn't seem like a thing that the
    > browser makers would feel a need to expose, and might in fact reveal
    > more of the user's behavior than wanted.
    >
    > I'd be interested to be proven wrong, but that's my guess.
    >
    > Good luck,
    >
    >   -- Scott
     
    Jayesh Modha, Feb 18, 2010
    #3
  4. Jayesh Modha

    Scott Sauyet Guest

    On Feb 18, 12:00 pm, Jayesh Modha <> wrote:
    > I am also thinking the same that browser would not expose a direct way
    > to tell difference between window refresh and window close.
    > However, if you look at my code above, we can specifically tell
    > difference between F5/CTRL+F5 refresh and window close. It also works
    > across all the browsers.


    Capturing F5/CTRL+F5 seems reasonable. But there are a number of
    other ways to refresh/reload the page. I tried your code in IE8 and
    FF3.6 and catch only the F5/CTRL+F5 events. It doesn't capture the
    refresh with the browsers' refresh/reload buttons. It doesn't capture
    the context menu reload. It doesn't capture FF's View > Reload. It
    doesn't capture CTRL-R in FF.

    Do you have a publicly available page where it's working for you?

    -- Scott
     
    Scott Sauyet, Feb 18, 2010
    #4
  5. Jayesh Modha

    Jayesh Modha Guest

    Unfortunately, I don't have a public page.

    I totally forgot CTRL + R, wow, thanks a lot for that. I will include
    that into my code.
    Hopefully, I haven't forgot any of my code here but I will zip up my
    code and send to you if you'd prefer that.

    On Feb 18, 9:31 am, Scott Sauyet <> wrote:
    > On Feb 18, 12:00 pm, Jayesh Modha <> wrote:
    >
    > > I am also thinking the same that browser would not expose a direct way
    > > to tell difference between window refresh and window close.
    > > However, if you look at my code above, we can specifically tell
    > > difference between F5/CTRL+F5 refresh and window close. It also works
    > > across all the browsers.

    >
    > Capturing F5/CTRL+F5 seems reasonable.  But there are a number of
    > other ways to refresh/reload the page.  I tried your code in IE8 and
    > FF3.6 and catch only the F5/CTRL+F5 events.  It doesn't capture the
    > refresh with the browsers' refresh/reload buttons.  It doesn't capture
    > the context menu reload.  It doesn't capture FF's View > Reload.  It
    > doesn't capture CTRL-R in FF.
    >
    > Do you have a publicly available page where it's working for you?
    >
    >   -- Scott
     
    Jayesh Modha, Feb 18, 2010
    #5
  6. Jayesh Modha

    David Mark Guest

    Stefan Weiss wrote:
    > On 18/02/10 18:42, Jayesh Modha wrote:
    >> Unfortunately, I don't have a public page.
    >>
    >> I totally forgot CTRL + R, wow, thanks a lot for that. I will include
    >> that into my code.
    >> Hopefully, I haven't forgot any of my code here but I will zip up my
    >> code and send to you if you'd prefer that.

    >
    > I'm curious about what you're trying to accomplish. I see how it can be
    > useful to issue a warning when a document is about to be unloaded (for
    > example, if there are unsaved changes, or the user is in the middle of a
    > chess game with a live opponent), but why do you want to detect the
    > difference between closing a window and reloading a document? That
    > sounds like a reload could lead to an undesired state, and from my
    > experience, those cases are better handled on the server side.
    >
    > Whatever the goal is, I doubt you can reliably detect a reload if you're
    > relying on clicks and keyboard events.


    There is no doubt that it can't be done. Any design hinging on doing
    that is doomed at the start.

    >
    >
    > (PS, please don't top-post on Usenet)
    >


    Seconded. :)
     
    David Mark, Feb 18, 2010
    #6
  7. Jayesh Modha

    rf Guest

    "Stefan Weiss" <> wrote in message
    news:...
    > On 18/02/10 18:42, Jayesh Modha wrote:
    >> Unfortunately, I don't have a public page.
    >>
    >> I totally forgot CTRL + R, wow, thanks a lot for that. I will include
    >> that into my code.
    >> Hopefully, I haven't forgot any of my code here but I will zip up my
    >> code and send to you if you'd prefer that.

    >
    > I'm curious about what you're trying to accomplish. I see how it can be
    > useful to issue a warning when a document is about to be unloaded (for
    > example, if there are unsaved changes, or the user is in the middle of a
    > chess game with a live opponent), but why do you want to detect the
    > difference between closing a window and reloading a document? That
    > sounds like a reload could lead to an undesired state, and from my
    > experience, those cases are better handled on the server side.


    I'll bet the OP has a form on the page that the OP does not want
    re-submitted.

    > Whatever the goal is, I doubt you can reliably detect a reload if you're
    > relying on clicks and keyboard events.


    Indeed.
     
    rf, Feb 19, 2010
    #7
  8. Jayesh Modha

    Jayesh Modha Guest

    On Feb 18, 4:25 pm, "rf" <> wrote:
    > "Stefan Weiss" <> wrote in message
    >
    > news:...
    >
    > > On 18/02/10 18:42, Jayesh Modha wrote:
    > >> Unfortunately, I don't have a public page.

    >
    > >> I totally forgot CTRL + R, wow, thanks a lot for that. I will include
    > >> that into my code.
    > >> Hopefully, I haven't forgot any of my code here but I will zip up my
    > >> code and send to you if you'd prefer that.

    >
    > > I'm curious about what you're trying to accomplish. I see how it can be
    > > useful to issue a warning when a document is about to be unloaded (for
    > > example, if there are unsaved changes, or the user is in the middle of a
    > > chess game with a live opponent), but why do you want to detect the
    > > difference between closing a window and reloading a document? That
    > > sounds like a reload could lead to an undesired state, and from my
    > > experience, those cases are better handled on the server side.

    >
    > I'll bet the OP has a form on the page that the OP does not want
    > re-submitted.
    >
    > > Whatever the goal is, I doubt you can reliably detect a reload if you're
    > > relying on clicks and keyboard events.

    >
    > Indeed.


    Thank you all JavaScript gurus for presenting your views. I am trying
    to detect most common methods of refreshing the window relating to my
    application, those are F5, CTRL+F5 and right click refresh. I just to
    give warning message on detection.

    In my case, there are no unsaved data but I definitely don't want to
    submit the form again. Please don't be rigid that it cannot be done.
    Please look at my code, try to understand it.
    My application is in pop up window so there are no standard browser
    buttons to do any activities like refresh/stop etc....
    Here's the logic of what I am doing in the code.

    1. Keyboard refresh
    I have flag called tryingToReload.
    I set this flag when some presses F5, CTRL + F5, CTRL + R.
    When I get to onbeforeunload event, I check if I have flag set, if the
    flag is set, user has requested refresh. I want to present them a
    warning that if you refresh, you will lose activities of current
    session.
    I reset tryingToReload when you click anywhere or any other activities
    detected.

    2. Mouse refresh
    I am using the same flag
    I set this flag when some presses right click on form and tag is
    either Body,TD or Div (those are only possible tags on my forms whose
    right click would present refresh option). So most likely you are
    going to refresh after opening context menu. if you don't select
    refresh and do any other activity, I am resetting the flag.
    If you select refresh option, onbeforeunload event would have flag
    set, so it means you were trying to refresh and by detecting this, I
    present the user a warning message.

    This work fine with all the browsers. Here's the real problem I have.

    When you do a right click but don't select refresh (remember my flag
    is set because you clicked on Body, TD or Div) and now you close
    window either by X close button on title bar or right click on title
    bar and select close from context menu (my app is in pop up window
    without standard browser buttons so there are no other options to
    chose), as my flag is set now, I am going to present warning which is
    wrong as the user is not refreshing the window, he is closing and I
    shouldn't present this warning on close.

    Again I don't have this issue with IE browser as IE would give me the
    mouse click location (e.clientY) even if it is on the title bar so the
    solution works fine for IE but other browser don't give me the mouse
    location on onbeforeunload event so that is the issue. But this edge
    to edge case for my application.

    Thanks,
    Jayesh Modha
     
    Jayesh Modha, Feb 19, 2010
    #8
    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. Kathy Burke
    Replies:
    0
    Views:
    2,875
    Kathy Burke
    Aug 4, 2003
  2. Rick Lubanovic

    onbeforeunload event is fired twice

    Rick Lubanovic, Oct 30, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    851
    Rick Lubanovic
    Oct 30, 2003
  3. RJN
    Replies:
    1
    Views:
    688
    Curt_C [MVP]
    Sep 24, 2004
  4. misho
    Replies:
    0
    Views:
    194
    misho
    Nov 21, 2007
  5. misho
    Replies:
    2
    Views:
    146
    Spam Catcher
    Nov 23, 2007
Loading...

Share This Page