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 — це важлива подія, яка допомагає керувати поведінкою сторінки у випадках, коли користувач перемикається на іншу сторінку або закриває браузер.
| Порада: | Не забувайте про кросбраузерну сумісність. Хоча більшість сучасних браузерів підтримують |
| Порада: |
|
| Порада: | На мобільних пристроях |
Синтаксис
window.addEventListener('pagehide', function(event) {
// код для обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі використовується подія pagehide для збереження часу, коли користувач залишає сторінку. Це може бути корисним для відстеження часу взаємодії користувача з додатком або сайтом.
window.addEventListener('pagehide', function(event) {
localStorage.setItem('lastExitTime', new Date().toISOString());
});У цьому прикладі відбувається збирання аналітичних даних про кліки користувача на сторінці. Коли користувач залишає сторінку, дані надсилаються на сервер для подальшої обробки.
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'
}
});
});