Thursday, August 7, 2008

Window Close Event of Browser

"Window close event of browser"... people is searching for this key sentence for long and found some solutions also. But sorry to admit that there is no direct support for detecting the window close event of browser or perhaps browser's tab in html or JavaScript. All we have few nice trick of html DOM(document object model) event which is used to simulate the browsers close event. Not all the codes work fine, or we can say that not all code work on all conditions.

onbeforeunload or onunload

Two of the most popular event of html DOM that is used to detect browser's close event is "onunload" and "onbeforeunload". Using onunload is pretty strait just subscribe the JavaScript event. "onunload" work okay on IE(Internet explorer) but doesn't work fine in Mozilla firefox on the other hand "onbeforeunload" works okay on both IE and firefox, so using "onbeforeunload" is safe. Lets look at a strait example how this is accomplished.

<script language="JavaScript">
window.onbeforeunload = WindowCloseHanlder;
function WindowCloseHanlder()
{
window.alert('My Window is reloading');
}
</script>



As you can see this approach is pretty strait and suppose to work. But it doesn't work always, in fact it doesn't work at all! well these two event fires each and every time on these operations.




  • post back
  • navigate to another page
  • refresh
  • close the browser
  • close the current tab

There could be more cases that I haven't encountered yet or failed to mentioned, but these are the most renowned cases. As you can see that the first three cases happens very frequently, so this technique does not work. Yet there are other solutions for overcoming the problem. Here is a forum discussion on that http://codingforums.com/archive/index.php?t-37279.html. You can find more discussion if you Google it.



Extending the onbeforeunload technique



If we handled the case of post back, navigate and refresh, "close event" detect will be fulfilled. So we are going to use some old fashion technique to handle that. If you want to perform any operation in html using mouse, you have to click on some kind of html element to do that. And that's why we will trap the mouse down event. We will mark any kind of mouse down on link, button, and any element so that when post back or navigate we can detect that, its happening because of user interaction on page. Next we will trap any special key event to make the page refresh or reload, for instance pressing Ctrl+f5,f5 and Ctrl+R can make the page refresh so we will also mark such kind of keyboard operation. So we will mark any kind of keyboard event and any kind of mouse event, other than those already mentioned case we are not marking the Alt+f4 or the browser or tab close. So if our window close event fires it happen definitely because of closing the browser or closing the tab. Bellow a simple code snippet is given to demonstrate the idea.




<body onbeforeunload="doUnload()" onmousedown="somefunction()">
<form id="form1" runat="server">
</form>
</body>
<script language="javascript" type="text/javascript">
var isClose = false;
//this code will handle the F5 or Ctrl+F5 key

    //need to handle more cases like ctrl+R whose codes are not listed here
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if(keycode == 116)
{
isClose = true;
}
}
function somefunction()
{
isClose = true;
}
function doUnload()
{
if(!isClose)
{
alert('window is closing');
}
}
</script>



Conclusion



As we have already discusses that there is no 100% full proofed way to detect the browser close event in lot of case the above technique can failed, for example if the user kill the browser's process from task manager there could be many more cases. Yet in lot of case this technique can be handy. Best of luck and happy programming.