Question

106

Is it possible to display a custom message in the beforeunload popup?

rated 0 times [ 111] [ 5] / answers: 1 / hits: 158940 / 8 Years ago, wed, august 10, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvingcarloe

Add To Favorites

Follow

Total Points: 677

Total Questions: 109

Total Answers: 96

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

irvingcarloe questions

1 Is it better to use multiple states or one state object in React?

Wed, Aug 10, 22, 00:00, 2 Years ago

1 Tailwind classes not working after page refresh in production

Fri, Jun 4, 21, 00:00, 3 Years ago

1 Event listener for dataLayer push events on Tag Manager JS

Wed, Mar 31, 21, 00:00, 3 Years ago

1 Convert file to Base64

Tue, Aug 4, 20, 00:00, 4 Years ago

1 How to autoplay audio in any browser?

Fri, Jul 3, 20, 00:00, 4 Years ago

View All

answered 8 Years ago jeniferjaliyahf · Accepted Answer

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:

Chrome removed support for custom message in ver 51

Opera removed support for custom message in ver 38

Firefox removed support for custom message in ver 44.0 (still looking for source for this information)

Safari removed support for custom message in ver 9.1