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)

View Comments

  • 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.

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

  • . 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.

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

  • 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..

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

  • 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.

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

5 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

5 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

5 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

5 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago