Подтверждение закрытия вкладки: решение на JS для всех браузеров

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

Чтобы защитить несохранённые данные пользователей, можно использовать эффективный метод: просто добавьте к объекту window обработчик события beforeunload и установите значение returnValue события в сообщение, предназначенное для пользователя. Это вызовет стандартный диалоговый окно подтверждения в большинстве браузеров. Насколько это просто? Словно прилетел Бэтмен!

window.onbeforeunload = function(e) {
    e.returnValue = 'Не забыли ли вы сохранить изменения?';
    return e.returnValue; // Этот код нужен для поддержки старых браузеров.
};

Обеспечение совместимости между браузерами

Использование обработчиков событий

Для современных браузеров предлагается использовать window.addEventListener('beforeunload', eventHandlerFunction) вместо window.onbeforeunload. Это столь же приятно, как обнаружить монетку от зубной феи под подушкой после того, как выпал молочный зуб.

window.addEventListener('beforeunload', function (e) {
    e.preventDefault(); // Куда ты спешишь?
    e.returnValue = ''; // Chrome требует явного указания намерений.
    return 'Не хотели бы вы остаться ещё немного?'; // Маленькое уступление для тех, кто сомневается.
});

Safari предпочитает, когда вы возвращаете строку непосредственно. Chrome может игнорировать ваше сообщение, если пользователь еще не взаимодействовал со страницей.

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

Эстетические и функциональные улучшения

Старайтесь быть тактичными: вызывайте beforeunload только тогда, когда это действительно необходимо. Так, как если бы вы предлагали тёплое одеяло, когда ощущается холод, а не в самый разгар летней жары.

let isDirty = false; // Состояние "грязности" страницы

window.addEventListener('beforeunload', function (e) {
    if (!isDirty) {
        return undefined; // Если проблем нет – проверка не требуется.
    }
    e.preventDefault();
    e.returnValue = ''; // Это код для Chrome.
    return 'У вас есть несохранённые изменения. Может быть, стоит их сохранить?'; // Напоминание о необходимости предпринять действие.
});

Придание индивидуального стиля

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

Управление пользовательскими настройками и исключениями

Обеспечиваем свободный проход

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

function optOut() {
    window.removeEventListener('beforeunload', byeFelicia); // Прощайте без лишних слов.
    // Здесь выполняем нужное действие
}

function byeFelicia(e) {
    e.preventDefault();
    e.returnValue = '';
    return 'Так скоро? Может, подумаете ещё раз?'; // Попытка удержать пользователя.
}

window.addEventListener('beforeunload', byeFelicia);

Предугадываем поведение браузеров

Разные браузеры по-разному реагируют на событие beforeunload. IE может отдать предпочтение e.cancelBubble = true, тогда как другие ожидают вызова e.stopPropagation(). Будьте готовы к этим особенностям и возможным несоответствиям.

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

1. Window: beforeunload event – Веб API | MDN
2. javascript – JavaScript перед покиданием страницы – Stack Overflow
3. onbeforeunload Событие – W3Schools
4. Страница: DOMContentLoaded, load, beforeunload, unload – JavaScript.info
5. Начальное руководство по использованию кэша приложений – web.dev
6. .on() | Документация по jQuery API
7. Ajax запрос с JQuery перед закрытием страницы – Stack Overflow