JS властивість Event.pagehide

Загальний опис

pagehide — це подія, яка виникає, коли користувач залишає сторінку або коли сторінка стає невидимою через перехід до іншої вкладки чи закриття браузера. Ця подія корисна для відстеження моменту, коли сторінка перестає бути активною або зникає з області перегляду.

При роботі з подією pagehide, вона може бути використана для збереження стану або виконання важливих дій перед тим, як користувач покине сторінку. Наприклад, це може бути корисним для збереження форми або відправки аналітичних даних перед тим, як сторінка буде закрита.

Однією з особливостей події є можливість перевірки властивості event.persisted, яка вказує на те, чи сторінка була кешована для подальшого використання. Це може бути корисним у випадках, коли ви хочете зрозуміти, чи сторінка просто перемикається в режим кешування, чи вона дійсно закривається повністю.

Ось приклад коду для обробки події pagehide:

window.addEventListener('pagehide', function(event) {
  if (event.persisted) {
    console.log('Сторінка зберігається в кеші.');
  } else {
    console.log('Користувач покинув сторінку.');
  }
});

У цьому прикладі, коли користувач залишає сторінку, в консоль буде виведено відповідне повідомлення залежно від того, чи сторінка зберігається в кеші або була закрита.

Ще однією корисною особливістю події pagehide є її застосування на мобільних пристроях або в браузерах з підтримкою функції "безперервності". Якщо користувач перемикається між вкладками або переміщує сторінку у фоновий режим, подія допоможе вчасно виконати потрібні дії для економії ресурсів або збереження важливих даних.

Подія pagehide працює разом з іншими подіями, такими як pageshow та beforeunload, і дозволяє краще управляти життєвим циклом сторінки.

Таким чином, pagehide — це важлива подія, яка допомагає керувати поведінкою сторінки у випадках, коли користувач перемикається на іншу сторінку або закриває браузер.

правити

Порада

pagehide може бути корисним при роботі зі SPA (Single Page Application). У цих випадках важливо відстежувати стан користувача, коли він покидає поточну сторінку або взаємодіє з додатком. Ви можете використовувати подію для збереження даних перед тим, як сторінка буде невидимою.

автор: Bond правити

Порада

На мобільних пристроях pagehide може спрацьовувати, коли користувач закриває браузер або перемикається на інший додаток. Це дає змогу зберігати незавершені дії або надсилати аналітичні дані перед тим, як сторінка зникне з поля зору.

автор: Bond правити

Порада

Не забувайте про кросбраузерну сумісність. Хоча більшість сучасних браузерів підтримують pagehide, завжди варто перевіряти підтримку і, за необхідності, використовувати резервні методи, такі як beforeunload, для критично важливих дій.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener('pagehide', function(event) {
  // код для обробки події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	3	6	5	15	12	11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	6	4.2

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

let analyticsData = { clicks: 0 };

window.addEventListener('click', function() {
  analyticsData.clicks++;
});

window.addEventListener('pagehide', function() {
  fetch('/saveAnalytics', {
    method: 'POST',
    body: JSON.stringify(analyticsData),
    headers: {
      'Content-Type': 'application/json'
    }
  });
});

window.addEventListener('pagehide', function(event) {
  localStorage.setItem('lastExitTime', new Date().toISOString());
});