Capture browser refresh using OnBeforeUnload event

J

Jayesh Modha

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;
}
 
S

Scott Sauyet

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
 
J

Jayesh Modha

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

Scott Sauyet

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
 
J

Jayesh Modha

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

David Mark

Stefan said:
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. :)
 
R

rf

Stefan Weiss said:
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.
 
J

Jayesh Modha

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


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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top