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