You cannot control when user will refresh the web page and close it, but it’s important sometimes to display a confirmation alert before closing the Tab.
The user may be mistakenly clicked the close button and lost some important data.
You have seen in Shopping websites when you are in the middle of payment or you are paying the Bill and if you try to refresh the web page then it will show a confirm alert on the screen.
When is it Required?
- When the form has many fields and the user filled the form but somehow the Browser is being closed. Now, the user needs to again fill that long-form.
- While student giving the online test and not completed yet and try to close or refresh the page.
- There are many other situations where you can use it.
In this post, I discuss How you can detect Browser Tab close and refresh using JavaScript.
Contents
1. onbeforeunload
onbeforeunload event trigger when tries to close, refresh the tab or closing the Browser.
You can use this to display an alert message on the Browser for this you only need to return your message text.
Example
<script type="text/javascript">
window.onbeforeunload = function () {
return 'Are you really want to perform the action?';
}
</script>
You can also perform in this way also –
<body onbeforeunload=" return 'Are you really want to perform the action?'">
2. Conclusion
As I said at the start of this tutorial, you cannot fully control the web page because you are not the owner of the Browser, you can only access limited info.
For example, you can only catch when the tab is closing but you don’t get any information why is closing.
But somehow it’s better to show a confirm box that asks the question to the user and this gives a chance to get back if the action is performed mistakenly.
If you found this tutorial helpful then don't forget to share.
hi,
i m searching for a js which fires when only closing a tab , apart from back nd forward and refresh button.
i already a script that fires when i click on close tab button,back nd forward and refresh button , but i want it specifically for a close tab button.
regards
sahil
I’m looking for same, please let me know if you got solution
window.addEventListener(“beforeunload”, function (e) {
var confirmationMessage = “\o/”;
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
Hello,
So if I show a confirmation popup then if the user chooses to not to close the tab how can I stop the tab from closing? How can I prevent that? Can I use the method event.preventDefault() ?
window.addEventListener(“beforeunload”, function (e) {
var confirmationMessage = “\o/”;
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});
I want to update record from my database when the browser or tab is closing, I was using onbeforeunload method in javascript but the data is not updating. I want to update the column to ‘Conversation has ended’ if the browser is closed by the visitor, however, I cannot do it with the onbeforeunload method.
Hi when the tab is closed I want alert with custom message i tried but no luck i usesd in angular window.onbeforeunload but not working
its only working with IE and not working in chrome.
Thank you.
How to get return value of onbeforeunload event in javascript ?
hi I need a custom css popup other than prompt while closing Tab/window
Thanks
Hi
How can I recognize refresh action from close action?