JavaScript: Подтверждение перед уходом со страницы после изменений

Быстрый ответ

window.onbeforeunload = function() {
  // Не уходите, еще не все сохранено!
  return changesMade ? "Ваши изменения не сохранены." : undefined;
};

Чтобы вызвать предупреждение, используйте window.onbeforeunload. Переменная changesMade возвращает true, если имеются несохраненные изменения. В этом случае происходит возвращение сообщения, требующего подтверждения от пользователя. Если false – возвращается undefined, и переход осуществляется свободно.

Отслеживание изменений в динамическом контексте

Отмечаем изменения с помощью события onchange

Для обнаружения изменений в полях ввода можно использовать событие onchange, которое переводит changesMade в статус true, если обнаружены изменения.

var changesMade = false;

// Задействуем каждый элемент формы!
document.querySelectorAll('input, textarea, select').forEach(function(input) {
    input.onchange = function() {
        // Изменение зафиксировано!
        changesMade = true;
    };
});

Подробнее об этом расскажет наш спикер на видео

Защищаемся от непреднамеренной отправки формы

При отправке формы предупреждение деактивируется с помощью события onsubmit:

// Форма, ваша миссия выполнена!
document.querySelector('form').onsubmit = function() {
    // Можем переходить дальше без опасений!
    window.onbeforeunload = null;
};

Совместимость с браузерами: современные и устаревшие

В целях безопасности некоторые современные браузеры могут не отображать персональные сообщения, предпочитая стандартный диалог. Старые браузеры поддерживают отображение персональных сообщений через свойство returnValue события beforeunload.

jQuery как универсальное решение

Чрезвычайно полезной при работе со событиями beforeunload является библиотека jQuery, сглаживающая различия между браузерами:

$(window).bind('beforeunload', function() {
    // jQuery в действии!
    return changesMade ? "Замечены несохранённые изменения." : undefined;
});

Визуализация

Вообразим браузер в виде палатки (⛺️), а пользовательские данные отражаем через аналогию с тлеющими углями (🔥):

🔥 Пользователь внес изменения 
⛺️ Пользователь собирается покинуть страницу

Предупреждение выступает в роли бадьи с водой (🪣), которое предотвращает несанкционированное "сжигание углей":

window.onbeforeunload = function() {
    // Сбережем дату! Подтвердите ваше намерение уйти.
    if (dataIsChanged) {
        return '🪣 Вы уверены, что хотите покинуть страницу без сохранения внесенных изменений?';
    }
};

Улучшения и индивидуальная настройка

Управление оповещениями: включение и отключение

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

function enablePrompt() {
    // Включим караул
    window.onbeforeunload = ...; // Ваша логика здесь
}

function disablePrompt() {
    // Дадим караулу отдохнуть
    window.onbeforeunload = null;
};

UX-дизайн: на стороне пользователя

Корректно сформулированные и понятные пользователю сообщения в диалоге подтверждения улучшают уровень взаимодействия. Несмотря на то, что браузеры часто используют стандартные диалоги, важно оставаться посредником между системой и пользователем, информируя о вероятной потере данных.

Тестирование в разных браузерах

Тестирование функционала в различных браузерах помогает обеспечить единый пользовательский опыт на всех платформах.

Изучение подробной документации

Ознакомление со стандартами HTML и Mozilla Developer Network (MDN) позволит глубже понять особенности, стандарты и ограничения современных браузеров.

Полезные материалы

1. Событие beforeunload в Web API | MDN — детальное руководство по событию beforeunload.
2. Руководство для новичков по кэшированию веб-приложений | web.dev — обширный материал о кэшировании веб-страниц и возможностях сохранения данных.
3. javascript – Как вывести предупреждение "Вы уверены, что хотите покинуть страницу?" при изменении данных? – Stack Overflow — обсуждение вопроса подтверждения перед выходом с веб-страницы.
4. Событие onbeforeunload — обширное руководство по обработке событий beforeunload в JavaScript.
5. HTML стандарт — официальная спецификация HTML, в которой описан процесс выгрузки документа.
6. События DOMContentLoaded, load, beforeunload, unload — разъяснение событий, связанных с загрузкой страницы, включая beforeunload.