Обработка события закрытия вкладки или браузера в JS

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

Для определения момента закрытия вкладки браузера применяется событие beforeunload. Установите обработчик этого события на объект window, чтобы выполнять определённые действия перед тем, как пользователь завершит сеанс работы:

window.onbeforeunload = function(e) {
  e.returnValue = 'Есть несохранённые изменения! Уверены, что хотите покинуть страницу?';
  return e.returnValue;
};

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

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

Учёт особенностей разных браузеров

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

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

Дополнительная обработка закрытия вкладки с помощью события unload

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

window.onunload = function() {
  // Код для выполнения дополнительных действий по очистке ресурсов
};

Будьте осторожны, используя это событие, поскольку его актуальность постепенно снижается в современной веб-разработке.

Хитрые доработки: использование event.clientY

Для старых версий браузеров, таких как IE7, можно проверять значение event.clientY для определения, была ли нажата кнопка закрытия вкладки:

window.onbeforeunload = function(event) {
  if (event.clientY < 0) {
    // Вкладка закрывается путём нажатия на кнопку "закрыть" пользователем
  }
};

Используйте этот подход только в тех случаях, когда без него нельзя обойтись.

Хранение данных до конца сессии

Работа с временными данными в sessionStorage

Через sessionStorage можно сохранять данные, которые будут удалены автоматически после закрытия вкладки:

// Сохранение данных
sessionStorage.setItem('key', 'value');

// Получение данных при повторном посещении страницы
const value = sessionStorage.getItem('key');

// Удаление данных
sessionStorage.removeItem('key');

sessionStorage подойдёт идеально, если требуется сохранить данные на протяжении сессии работы с страницей.

Взаимодействие jQuery и sessionStorage

jQuery облегчает работу с sessionStorage, делая код более лаконичным и обеспечивая увеличение кроссбраузерности:

// Сохранение данных с помощью jQuery
$(window).on('beforeunload', function() {
  $.sessionStorage.setItem('key', 'value');
});

// Получение и удаление данных
$(document).ready(function() {
  var value = $.sessionStorage.getItem('key');
  $.sessionStorage.removeItem('key');
});

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

Возможные проблемы и способы их решения

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

В некоторых сложившихся ситуациях или при работе со старыми браузерами, такими как IE7, используйте перенаправление на страницу выхода для корректного завершения работы пользователя или выполнения серверной очистки:

window.onbeforeunload = function() {
  window.location.href = '/logout';
};

Важно заранее удостовериться, что это перенаправление не нарушит процедуру сохранения данных, инициируемую событием beforeunload.

Заключительные замечания о детектировании закрытия вкладки

На сегодняшний день beforeunload и onunload — лучшие доступные инструменты для отслеживания закрытия вкладок и окон в JavaScript. Однако стоит всегда следить за обновлениями и новыми API, чтобы быть в курсе последних изменений в области веб-разработки.

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

Воспримем работу этих событий на примере метафоры:

1. Как только пользователь решает уйти, 🚧 событие window.beforeunload спрашивает: "Вы уверены, что хотите уйти?";
2. Если пользователь подтверждает своё намерение уйти, 🏗️➡️🚪 срабатывает window.unload с прощальными словами: "До свидания, приходите снова!".

Глубже в beforeunload

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

Подтверждение закрытия вкладки

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

Проблема сохранения данных

Всегда оценивайте, на какой срок вы хотите сохранить данные. Используйте sessionStorage для краткосрочного и localStorage для долгосрочного хранения данных.

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

1. Window: событие beforeunload – Web APIs | MDN – для глубокого понимания события beforeunload.
2. Страница: DOMContentLoaded, load, beforeunload, unload – разъяснение различных событий в жизненном цикле страницы.
3. Page Lifecycle API | Веб-платформа | Chrome для разработчиков – взгляд Google на жизненный цикл страницы.
4. Использование Page Visibility API | Статьи | web.dev – знакомство с API Page Visibility.
5. HTML Стандарт – детали о Page Visibility API.
6. Can I use... Поддержка HTML5, CSS3 и т.д. – таблицы совместимости Page Visibility API с различными браузерами.