Способы определения события, когда пользователь покидает страницу с помощью JavaScript
При разработке веб-приложений, бывают случаи, когда нам нужно определить, что пользователь покидает веб-страницу или переключается на другую вкладку.
В этой статье мы рассмотрим несколько простых способа, как можно определить в JavaScript, когда пользователь покидает страницу. К сожалению, каждый из этих способов имеет некоторые недостатки.
Событие beforeunload
Событие beforeunload запускается, когда окно или документ собираются выгружаться.
Это означает, что когда мы нажимаем на кнопку назад, или мы хотим закрыть вкладку, за мгновение до того, как браузер начнет выполнять это действие, сработает событие beforeunload.
Это событие можно использовать, например, для отправки некоторых данных на сервер, или для изменения чего-либо в локальном хранилище браузера.
const beforeUnloadListener = (event) => {
axios.post('/logs', { name: 'Log', data: 'some data' });
};
window.addEventListener("beforeunload", beforeUnloadListener);
Однако мы должны иметь в виду, что c этим событием связаны некоторые проблемы, оно не всегда определяет, когда пользователь покидает веб-страницу, особенно на мобильных устройствах.
Событие pagehide
Аналогично событию beforeunload , есть событие pagehide, которое запускается, когда пользователь покидает текущую страницу, например, при нажатии кнопки «Назад». Но и оно тоже не всегда срабатывает.
const pageHideListener = (event) => {
axios.post('/logs', { name: 'Log', data: 'some data' });
};
window.addEventListener("pagehide", pageHideListener);
Событие visiblitychange
Самый надежный способ определить, когда пользователь покидает веб-страницу, — это использовать событие visiblitychange. Это событие срабатывает при таких изменениях, как смена вкладок, сворачивание окна браузера, переключение с браузера на другое приложение на мобильном устройстве и т.д.
Это лучший, из указанных выше, способ отправить небольшие данные для аналитики на сервер:
document.onvisibilitychange = function() {
if (document.visibilityState === 'hidden') {
navigator.sendBeacon('/log', analyticsData);
}
};
Источник
