How to: Capture browser close button event or exiting the page in javascript.

A lot of times we have requirement to do some stuff like invalidating session whenever user clicks browser close button thereby invoking close event in browser. Let us see how to achieve this using JavaScript. In JavaScript we have events such as onbeforeunload and onunload. These events as their name suggest, gets triggered whenever the page gets unload. This happens if user close the browser or move to different page. We can use these events to call any javascript handler function. Register for an event from body tag.
<script language="javascript"> function fnUnloadHandler() { // Add your code here alert("Unload event.. Do something to invalidate users session.."); } </script> <body onbeforeunload="fnUnloadHandler()"> <!-- Your page content --> </body>
Code language: HTML, XML (xml)
Here in above code snippet we have registered the event onbeforeunload from <body> tag. You can also registered for the event using window.eventname handler. For e.g.
window.onbeforeunload = function() { // Add your code here alert("Unload event.. Do something to invalidate users session.."); }
Code language: JavaScript (javascript)
Get our Articles via Email. Enter your email address.

You may also like...

8 Comments

  1. dinn says:

    Even the best applications have bugs, anyway Mozilla http://file.sh/mozilla+torrent.html fixed is reasonably quickly compared to most software producers.

  2. To stay unobtrusive I would recommend using the second method instead of the first. More importantly I want to point out the difference between the two functions. IE 4 is where onbeforeunload came from and is how browsers actually came to pick up the function. onunload is the function that w3schools.com has documentation for.

    Unfortunately these two functions do behave the same. onbeforeunload expects a return string which would be be displayed to the user in a dialog popup. Each browser displays this dialog popup differently and your text is the only thing that would be the same. This throws cross browser consistency out the window. And to make it even worse, IE expects ‘returnValue’ instead of just ‘return’.

    onunload doesn’t look for return string to execute and is what the above examples resemble more accurately. Bottom line, don’t use these functions if you don’t have too. They are a nightmare to debug, especially across a wide set of browsers.

  3. Sastry says:

    Unfortunately, the function will be called even the user hits refresh buttong which is not desirable.

  4. . Each browser displays this dialog popup differently and your text is the only thing that would be the same. This throws cross browser consistency out the window. And to make it even worse, IE expects ‘returnValue’ instead of just ‘return’.

    onunload doesn’t look for return string to execute and is what the above examples resemble more accurately. Bottom line, don’t use these functions if you don’t have too. They are a nightmare to debug, especially across a wide set of browsers.

  5. Ajit Karn says:

    This code is calling every time this function whenever i click any server controls or refreshing the page.

  6. Destiny says:

    Hi.. I know so little about code so please make it simple..

    I need to add a button, where I add some js to close/exit that current browser window..

    Is this possible…

    Thank you..

  7. vishwajeet singh says:

    These function will not work with Mozilla . they are working fine with chrome only . So these are not the best solutions

  8. Roy says:

    The function gets trigger even if we refresh page or navigate to another page in Chrome. Is there any way to execute the script only when window is closed and not when page is refreshed (or) navigated to another page. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *