Catching a tab close event in web browser?

Question

Is there any way of knowing if the user closes a tab in a web browser? Specifically IE7, but also FireFox and others as well. I would like to be able to handle this situation from our asp code if the current tab containing our web site closes.

Answer 1

Attach an "onbeforeunload" event. It can execute code just before the browser/tab closes.

Answer 2

onbeforeunload also gets called on the following events -

* Close the current browser window.
* Navigate to another location by entering a new address or selecting a Favorite.
* Click the Back, Forward, Refresh, or Home button.
* Click an anchor that refers the browser to another Web page.
* Invoke the anchor.click method.
* Invoke the document.write method.
* Invoke the document.open method.
* Invoke the document.close method.
* Invoke the window.close method.
* Invoke the window.open method, providing the possible value _self for the window name.
* Invoke the window.navigate or NavigateAndFind method.
* Invoke the location.replace method.
* Invoke the location.reload method.
* Specify a new value for the location.href property.
* Submit a form to the address specified in the ACTION attribute via the INPUT type=submit control, or invoke the form.submit method.

So, if you are trying to log out the user if they close the tab or browser window, you would end up logging them out everytime they click a link or submit the page.

Answer 3

Does document.unload not do it if you?

Answer 4

If you need to know when the page is closed at the server side, your best bet is to ping the server periodically from the page (via XMLHttpRequest, for example). When pinging stops, the page is closed. This will also work if the browser crashed, was terminated or the computer was turned off.

Answer 5

As Eran Galperin suggested, use onbeforeunload. Particularly, return a string, and that string will be included in a confirmation dialog which will allow the user to choose whether or not to leave the page. Each browser includes some text before and after the string you return, so you should test in different browsers to see what a user would be presented with.

Answer 6

I'm sure the OP is asking from the context of the web page itself, but for any Firefox-addon-developers who come across this question, you can use the TabClose event. https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Notification_when_a_tab_is_added_or_removed

Answer 7

Santosh is right, this event will be triggered on many more actions than just clicking the close button of your tab/browser. I've created a little hack to prevent the onbeforeunload action to be triggered by adding the following function on document ready.

       $(function () {     
        window.onbeforeunload = OnBeforeUnload;
            $(window).data('beforeunload', window.onbeforeunload);
            $('body').delegate('a', 'hover', function (event) {
                if (event.type === 'mouseenter' || event.type === "mouseover")
                    window.onbeforeunload = null;
                else
                    window.onbeforeunload = $(window).data('beforeunload');
            });
        });

Also, before you trigger any of the events mentioned by Santosh, you need to run this line:

window.onbeforeunload = null;

If you do not want the event to be triggered.

And here's the final code piece:

    function OnBeforeUnload(oEvent) {   
            // return a string to show the warning message (not every browser will use this string in the dialog)
            // or run the code you need when the user closes your page  
        return "Are you sure you want to close this window?";       
    }