Возможно ли отобразить пользовательское сообщение во всплывающем окне beforeunload?

Ответ 1

Чтобы установить подтверждающее сообщение до того, как пользователь закроет окно, вы можете использовать

JQuery

$(window).bind("beforeunload",function(event) {
    return "You have some unsaved changes";
});

Javascript

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

Важно отметить, что вы не можете поместить confirm/alert внутрь beforeunload

Еще несколько заметок:

1. НЕ все браузеры поддерживают это (больше информации в разделе совместимости браузера на MDN)
2. В Firefox вы ДОЛЖНЫ сделать реальное взаимодействие со страницей, чтобы это сообщение появилось для пользователя.
3. Каждый браузер может добавить свой собственный текст в ваше сообщение.

Вот результаты использования браузеров, к которым у меня есть доступ:

Хром:

Fire Fox:

Сафари:

IE:

Просто чтобы убедиться - нужно включить jquery

Дополнительная информация о поддержке браузеров и удалении пользовательских сообщений:

1. В Chrome удалена поддержка пользовательских сообщений в версии 51
2. Опера убрала поддержку пользовательских сообщений в версии 38
3. Firefox удалил поддержку настраиваемого сообщения в версии 44.0 (все еще ищет источник этой информации)
4. Safari убрал поддержку пользовательских сообщений в версии 9.1

Ответ 2

При использовании window.onbeforeunload (или $(window).on("beforeonload")), возможно ли отобразить в этом всплывающем $(window).on("beforeonload") пользовательское сообщение?

Уже нет. Все основные браузеры начали игнорировать фактическое сообщение и просто показывать свои собственные.

Рассматривая существующие ответы, я чувствую, что это было возможно в прошлом, используя такие вещи, как confirm или alert или event.returnValue, но теперь кажется, что они больше не работают.

Правильный. Долгое время назад, вы могли бы использовать confirm или alert, совсем недавно вы могли бы вернуть строку из onbeforeunload обработчика и будет отображаться эта строка. Теперь содержимое строки игнорируется и рассматривается как флаг.

При использовании JQuery on, вы действительно должны использовать returnValue на оригинальном мероприятии:

$(window).on("beforeunload", function(e) {
    // Your message won't get displayed by modern browsers; the browser 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";
});

или старомодным способом:

window.onbeforeunload = function() {
    return "Your message here"; // Probably won't be shown, see note above
};

Это все, что ты можешь сделать.

Ответ 3

Я только что сделал div, который показывает сообщение на заднем плане. Это позади модального, но это лучше, чем ничего. Это немного неестественно, но, по крайней мере, вы можете дать своему пользователю некоторую информацию о том, почему вы мешаете ему/ему не уходить.

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.";
}

Вот рабочая скрипка https://jsfiddle.net/sy3fda05/2/