Окно: событие beforeunload

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

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

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

• Вызов метода preventDefault() объекта события.
• Установление свойства returnValue объекта события в значение отличное от пустой строки или любое другое истинное значение.
• Возвращение любого истинного значения из функции обработчика событий, например, return "string". Обратите внимание, что это работает только в том случае, если функция подключена через свойство onbeforeunload, а не через метод addEventListener(). Это поведение сохраняется в современных версиях Firefox, Safari и Chrome.

Последние два механизма являются устаревшими функциями; лучшей практикой является запуск диалогового окна вызовом preventDefault() на объекте события, а также установление значения returnValue для поддержки устаревших случаев.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("beforeunload", (event) => {});
onbeforeunload = (event) => {};

A BeforeUnloadEvent. Наследуется от Event.

Для отображения диалогового окна при закрытии или переходе на вкладку функция обработчика события beforeunload должна вызвать preventDefault() на объекте события. Следует отметить, что современные реализации:

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

Событие beforeunload страдает от некоторых проблем:

• Он не срабатывает надёжно, особенно в мобильных платформах. Например, событие beforeunload вообще не срабатывает в следующем сценарии:

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

  Примечание: Рекомендуется использовать событие visibilitychange в качестве более надёжного сигнала для автоматического сохранения состояния приложения, которое решает проблемы, подобные описанным выше. См. Don't lose user and app state, use Page Visibility для получения более подробной информации.

• В Firefox, beforeunload не совместим с кешем вперёд/назад (bfcache): то есть Firefox не поместит страницы в bfcache, если они имеют beforeunload слушателей, что плохо сказывается на производительности.

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

В дополнение к интерфейсу Window свойство обработчика событий onbeforeunload также доступно для следующих целей:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

В следующем примере у нас есть текстовый HTML <input> для представления данных, которые могут быть изменены и требуют сохранения:

<form>
  <input type="text" name="name" id="name" />
</form>

Наш JavaScript подключает слушатель события input к элементу <input>, который отслеживает изменения в введённом значении. При обновлении значения на значение, отличное от пустого, слушатель события beforeunload подключается к объекту Window.

Если значение снова становится пустой строкой (т. е. значение удаляется), слушатель события beforeunload удаляется снова — как указано выше в Примечаниях к использованию, слушатель должен быть удалён, когда не сохраняются данные, о которых нужно предупреждать.

Функция обработчика события beforeunload вызывает event.preventDefault() для запуска диалогового окна предупреждения при закрытии или переходе на вкладку. Мы также включили event.returnValue = true в функцию обработчика, чтобы любые браузеры, которые не поддерживают механизм event.preventDefault(), всё ещё могли корректно выполнять демонстрацию.

const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});

Когда значение <input> не пустое, при попытке закрытия, перехода или перезагрузки страницы браузер отображает диалоговое окно предупреждения. Попробуйте:

• BeforeUnloadEvent интерфейс
• Связанные события:
  • DOMContentLoaded
  • readystatechange
  • load
  • unload
• API жизненного цикла страницы предоставляет более полезные рекомендации по обработке поведения жизненного цикла страницы в ваших веб-приложениях.