When using window.onbeforeunload (or $(window).on("beforeunload")), is it possible to display a custom message in that popup?
Maybe a small trick that works on major browsers?
By looking at existing answers I have the feeling this was possible in the past using things like confirm or alert or event.returnValue, but now it seems they are not working anymore.
So, how to display a custom message in the beforeunload popup? Is that even/still possible?
tl;dr - You can't set custom message anymore in most modern browsers
A quick note (since this is an old answer) - these days all major browsers don't support custom message in the
beforeunloadpopup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.
In order to set a confirmation message before the user is closing the window you can use
jQuery
$(window).bind("beforeunload",function(event) {
return "You have some unsaved changes";
});
Javascript
window.onbeforeunload = function() {
return "Leaving this page will reset the wizard";
};
It's important to notice that you can't put confirm/alert inside beforeunload
A few more notes:
- NOT all browsers support this (more info in the Browser compatibility section on MDN) 2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.
Here are the results using the browsers I have access to:
Chrome:
Firefox:
Safari:
IE:
Just to make sure - you need to have jquery included
More information regarding the browsers support and the removal of the custom message:
When using
window.onbeforeunload(or$(window).on("beforeonload")), is it possible to display a custom message in that popup?
Not anymore. All major browsers have started ignoring the actual message and just showing their own.
By looking at existing answers I have the feeling this was possible in the past using things like
confirmoralertorevent.returnValue, but now it seems they are not working anymore.
Correct. A long time ago, you could use confirm or alert, more recently you could return a string from an onbeforeunload handler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.
When using jQuery's on, you do indeed have to use returnValue on the original event:
$(window).on("beforeunload", function(e) {
// Your message won't get displayed by modern browsers; the browser's built-in
// one will be instead. But for older browsers, best to include an actual
// message instead of just "x" or similar.
return e.originalEvent.returnValue = "Your message here";
});
or the old-fasioned way:
window.onbeforeunload = function() {
return "Your message here"; // Probably won't be shown, see note above
};
That's all you can do.
As of 2021, for security reasons, it is no longer possible to display a custom message in the beforeunload popup, at least in the main browsers (Chrome, Firefox, Safari, Edge, Opera).
This is no longer possible since:
For details see:
An alternative approach in order to get a similar result is to catch click events related to links (that would take you away from the current page) and ask for confirmation there. It might be adjusted to include forms submission or perhaps redirections through scripts (that would require to apply a specific class and information in the elements that trigger the redirect).
Here is a working code snippet (based on jQuery) that shows you how you can do it:
Edit: the code snippet here in SO does not work on all browsers, for security reasons (the snippet generates an iframe... and in some browsers "Use of window.confirm is not allowed in different origin-domain iframes"), but the code DOES work, so give it a try!
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://stackoverflow.com">Click me and I'll take you home</a>
I just made a div appear that shows a message in the background. It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.
constructor($elem)
{
$(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
$('#leaveWarning').show();
setTimeout(function(){
$('#leaveWarning').hide();
}, 1); // set this to 1ms .. since timers are stopped for this modal,
// the message will disappear right after the user clicked one of the options
return "This message is not relevant in most modern browsers.";
}
Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/
You can't set a custom message on a modern browser instead you can use of default alert function.
Try this code for all all browsers supported
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?';
};
All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.
window.onbeforeunload = function(e) {
$('#leaveWarning').show();
// the timer is only to let the message box disappear after the user
// decides to stay on this page
// set this to 1ms .. since timers are stopped for this modal
setTimeout(function() {
$('#leaveWarning').hide();
}, 1);
//
return false;
return "This message is not relevant in most modern browsers.";
}
