When using window.onbeforeunload
(or $(window).on("beforeonload")
), 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?
The onbeforeunload event occurs when the document is about to be unloaded. This event allows you to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page. The default message that appears in the confirmation box, is different in different browsers.
The beforeunload event is fired when the window, the document and its resources are about to be unloaded. The document is still visible and the event is still cancelable at this point. This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.
Cancelable: The beforeunload event can be canceled by user interaction: // by https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Example window. addEventListener("beforeunload", function(event) { event. preventDefault(); // Cancel the event as stated by the standard.
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
confirm
oralert
orevent.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.
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
beforeunload
popup. 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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With