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
- Perform database operation before close the browser (without alert)
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <title> Detect browser or tab close event using JavaScript - Clue Mediator </title> </head> <body> <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> </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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <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> </head> <body> <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> </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
Output: On tab/browser close
That’s it for today.
Thank you for reading. Happy Coding..!!
Thanks for idea delay the script using looping 🙌