Detect browser or tab close event using JavaScript

Today we’ll show you how to detect browser or tab close event using 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 this JavaScript article, we will show you how to perform operation before closing the browser/tab. Also we will give you another example where we can show alert to the user before reload or close the tab/browser.

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.

  <title>
    Detect browser or tab close event using JavaScript - Clue Mediator
  </title>



  <h3>Detect browser or tab close event - <a href="https://cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</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>

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.

  <title>
    Detect browser or tab close event using JavaScript - Clue Mediator
  </title>
  <style>
    input {
      width: 300px;
      padding: 5px;
      border: 1px solid #999;
      border-radius: 4px;
    }
  </style>



  <h3>Detect browser or tab close event - <a href="https://cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</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>

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

Reload page - Detect browser or tab close event using JavaScript - Clue Mediator

Output: On tab/browser close

Close page - Detect browser or tab close event using JavaScript - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!