Выполнение кода при закрытии окна браузера или обновлении страницы

Часто желательно выполнять определенные действия, когда пользователь закрывает окно браузера или обновляет веб-страницу. К счастью, для решения этой задачи есть два обработчика событий: window.onbeforeunload и window.onunload.

window.onbeforeunload

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

window.onunload

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

Реализация

Оба onbeforeunload и onunload можно назначить свойствам окна или используя метод .addEventListener. Вот пример:

// window property
window.onbeforeunload = function() {
  // Do something
};

// .addEventListener
window.addEventListener("beforeunload", function(e) {
  // Do something
});

Примечание:

В случае iframe события onbeforeunload не срабатывают, когда iframe удаляется его родительским элементом, но события выгрузки и скрытия страницы срабатывают. Однако в Firefox в настоящее время имеется ошибка, которая не позволяет этим событиям срабатывать в случаях удаления iframe, что делает невозможным запуск кода непосредственно перед удалением iframe в Firefox.