Home > Client Side Programming > Catch Window Close Event

Catch Window Close Event


Once in a while people ask me how to catch the IE window’s close event. One thing to use is onbeforeunload event of the window. But the problem in using this event is, you never know when this onbeforeunload event is called. This event could be called for numerous reason like navigation to another page with in the application. So you cannot exactly catch the browser close event using onbeforeunload.

The mouse pointer position comes in handy in this cases. We can effectively harness the power of both onbeforeunload and clientY position to exactly catch the browser close event.

Code:

window.onbeforeunload = onunload;
function onunload()
{
var closeEvent=false;
if (event.clientY < 0)
closeEvent = true;

if ((closeEvent))
{
//Write your code here for close event.
}
}

Is there any other efficient way to do this?

Update:

Anonymous: This so very well works with internet explorer 8; i have also tested the tabs it works well. I have given the full code here. However, obviously, there is a requirement: You must allow the execution of javascript.

<HTML>
<head>
<script>

    window.onbeforeunload = closeit;

    function closeit() {
        var closeEvent = false;
        alert(event.clientY);
        if (event.clientY < 0)
            closeEvent = true;

        if ((closeEvent)) {
            alert("do you want to close the window");
            //your actions during closing comes here
        }
    }

</script>
</head>
<body>
  <a href="https://chillicode.wordpress.com">Click here to navigate to
      Chillicode</a>
</body>
</html>

The above code helps us to catch the window close event and there by we can do what ever we wish to do.

In some cases it is enough to just alert the user that he is trying to close the window; how to achieve it? That is even more simple; just return a string value in the closeit function

function closeit()
{
  return "Any string value here forces a dialog box to \n" + 
         "appear before closing the window.";
}
Advertisements
  1. Anonymous
    December 7, 2009 at 9:10 am

    Doesn’t work on IE8

  2. January 21, 2010 at 3:47 pm

    Anonymous, Sad that it didn’t work for you in IE8. But it works very well in IE8 (including closing tab). Try the full code I have given in update section in this same post and let me know if it still didn’t work!

  3. Hardeep
    June 2, 2010 at 6:47 pm

    This only works if you click on the X button on the top right corner of the browser window. If you have a link or button any where within the browser page that closes the browser window or use Alt F4 this wont work as event.clientY will only be negative if the mouse pointer is on the browser header.

  4. Jaime V
    June 23, 2010 at 2:29 pm

    I tested the code and this seems to work well. The only issue I ran into is when there are multiple tabs and the user hits the browser-close button. In my case, the browser prompted me to if I wanted to close all tabs or just the current tab…the ‘closeit()’ function was executed only after I answered that dialog, the mouse coordinates were no longer negative therefore did not invoke the “do you want to…” alert.

  5. hmmm
    January 27, 2011 at 9:59 am

    It works in IE but not on firefox

  6. hareesh
    March 23, 2011 at 9:32 am

    But function closeit() will fire while refreshing the page. I need it only in Close Event.pls Help me

  7. May 10, 2011 at 1:14 am

    @hareesh: the closeit() function given here fires when you click on the cross button in upper right corner of the browser window – it doesn’t need a page refresh for sure. Please let me know the browser you are using.

  8. Nishaan
    October 19, 2011 at 2:11 pm

    Working Perfect ,.. for ie8, tabbed browser as well as close(x at right corner) ,.. Thanks a lot bro ,.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: