Detect Browser Close Event
How to detect browser or tab closing ?
How to detect browser or tab closing in JavaScript ?
tab or window closing in a browser can be detected by using the beforeunload
event. This can be used to alert the user in case some data is unsaved on the page, or the user has mistakenly navigated away from the current page by closing the tab or the browser.
The addEventListener
() method is used to set up a function whenever a certain event occurs. The beforeunload
event is fired just before the windows and its resources are to be unloaded. When this event is fired, the webpage is visible and the event is still cancellable at this point.
The event handler should call preventDefault()
to show the confirmation dialog according to the specifications. If the user wishes to continue to a new page, then it navigates to the new page, otherwise the navigation is cancelled. However, older browsers may not support this method and a legacy method is used in which the event handler must return a string. This returned string can be empty.
This method works for detecting both when a tab is being closed or when the browser is being closed.
//Javascript envent to handle the browser close and tab close event.
//alert message will be triggered by default from the browser itself.
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
<!DOCTYPE html>
<html>
<head>
<title>
How to detect browser or tab closing
</title>
</head>
<body>
<h1 style="color: green">
How to Detect Browser Close Event ?
</h1>
<b>Detect browser or tab closing</b>
<p>
The beforeunload function is triggered
just before the browser or tab is to be
closed or the page is to be reloaded.
Modern browsers require some interaction
with the page, otherwise the dialog box
is not shown.
</p>
<form>
<textarea placeholder = "Trigger an
interaction by writing something here">
</textarea>
</form>
<script type="text/javascript">
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
</script>
</body>
</html>
Last updated
Was this helpful?