Code Premix

How to detect browser or tab close event in JavaScript

📅September 29, 2021

Today we’ll show you how to detect browser or tab close event in JavaScript and perform some operations like database update or data manipulation. Sometimes you can use it to warn the user before leaving the page.

In both cases, we will use the beforeunload event to detect the close event.

Way to detect browser or tab close event

  1. Perform database operation before close the browser (without alert)
  2. Show alert before close/reload the tab or browser

1. Perform database operation before close the browser (without alert)

Here, we will use the addEventListener() method to handle the beforeunload event to detect browser close. Use the following code to perform the DB operation or data manipulation.


<html>

<head>
  <title>
    How to detect browser or tab close event in JavaScript - Code Premix
  </title>
</head>

<body>
  <h3>Detect browser or tab close event - <a href="https://codepremix.com/" target="_blank" rel="noopener noreferrer">Code Premix</a></h3>
  <p>Perform database operation before close the browser (without alert)</p>
  <script type="text/javascript">
    window.addEventListener("beforeunload", function (e) {

      // *********** perform database operation here
      // before closing the browser ************** //

      // added the delay otherwise database operation will not work
      for (var i = 0; i < 500000000; i++) { }
      return undefined;
    });
  </script>
</body>

</html>

In the above code, we have added the delay for database operation otherwise it will not happen.

2. Show alert before close/reload the tab or browser

In the second way, we will warn the user before reloading or leaving the page.


<html>

<head>
  <title>
    How to detect browser or tab close event in JavaScript - Code Premix
  </title>
  <style>
    input {
      width: 300px;
      padding: 5px;
      border: 1px solid #999;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <h3>Detect browser or tab close event - <a href="https://codepremix.com/" target="_blank" rel="noopener noreferrer">Code Premix</a></h3>
  <b>Show alert before close/reload the tab or browser</b>

  <p>Nowadays, most browsers require interaction with a page / site, otherwise a warning box will not be shown.</p>

  <form>
    <input type="text" placeholder="Write something to do interaction" />
  </form>

  <script type="text/javascript">
    window.addEventListener('beforeunload', function (e) {
      e.preventDefault();
      e.returnValue = '';
    });
  </script>
</body>

</html>

In the above example, we have added the input field for user interaction because most browsers require interaction with a page/site, otherwise a warning box will not be shown.

Output: On page reload