Many times we've asked ourselves if it's possible to show a confirmation window or alert when a user is leaving our page. This is particularly useful in various situations where the user is downloading or uploading a document on the page and it is essential that the user does not close the page, that is, maintains the session until the operation finishes. In these cases, we can show a confirmation message. We can easily implement this using the JavaScript beforeunload event, which is executed when the user attempts to close our application's window.
The beforeunload event is executed precisely when the user tries to leave the page, meaning they close the browser window or tab. In these cases, we can show a confirmation message to ask if the user is completely sure they want to leave our application, although it is a tool that should be used carefully to avoid annoying the user with pop-ups or emergency messages.
The confirmation before closing a tab — also known as the beforeunload dialog — is a small alert that appears when the user attempts to close the browser, the tab, or reload the page while something important is happening. It's a simple tool, but when used well, it can save you accidental abandonments and interrupted processes.
Common use when the user might lose information upon closing: add a confirmation window.
When to use it and when to avoid it
It is advisable to use beforeunload when:
- The user is uploading a file.
- A critical process is running (downloads, conversions, report generation).
- There is a long or costly form to fill out.
- It involves content you don't want them to accidentally lose.
It is not advisable to use it when:
- You want to aggressively retain the user.
- Your goal is to prevent them from leaving your website for marketing reasons (terrible idea).
- The user's action does not require confirmation.
Restrictions and recent changes in browsers
Modern browsers no longer allow custom messages.
This means that even if you write a nice text inside event.returnValue, Chrome, Firefox, or Safari will not display it. They will only show a generic message controlled by the browser.
How the beforeunload event works in JavaScript
Its use is very simple; we simply need to assign a value to the returnValue property, usually just a text string, and this text will be displayed when the user attempts to close the page. If no value is set, the event occurs, but no alert or notification is shown to the user that they are about to close the page.
The beforeunload event fires just as the user is about to leave the page. Essentially, all you need to do is assign a value to event.returnValue and the browser will do the rest.
window.addEventListener("beforeunload", function (event) {
event.returnValue = "Are you sure you want to go out?";
});And the classic version:
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Are you sure you want to go out?';
}
// For Safari
return 'Are you sure you want to go out?';
};Behavior in different browsers
- Chrome: ignores the custom text, shows a generic message.
- Firefox: similar behavior.
- Safari: still tolerates return in some scenarios.
- Mobile: very limited support; it almost always ignores it.
The key here is not to activate it all the time, ONLY when I know the user is in an important process whose closure implies LOSING what the user is doing.
More respectful alternatives for retaining users
- Progress bars.
- In-page messages.
- Auto-saving of forms.
- Internal confirmations before leaving sections.
On more than one occasion, I have opted for these alternatives instead of beforeunload when the objective was not critical.
Frequently Asked Questions
- Does Chrome allow custom messages?
- No. It only displays a generic message.
- Does it work on mobile?
- On most Android/iOS, support is almost nonexistent.
- Is it legal to use it?
- Yes, as long as you do not manipulate the user deceptively.
- How to avoid abusing it?
- Activate it only during interactions that truly justify it.
Conclusion
The confirmation before closing the tab is a small but powerful tool. When used well, it prevents loss of progress, errors, and accidental abandonments. In my case, it has helped me a lot on my blog and on my course and book pages, where keeping the user until everything is ready is key.
The secret is to use it sparingly, activate it only when it genuinely adds value, and understand its limitations in modern browsers.