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

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

Подія pageshow виникає, коли сторінка відображається у браузері. Це відбувається як при початковому завантаженні сторінки, так і коли користувач повертається на сторінку через функцію "назад" або "вперед" у браузері, особливо якщо сторінка завантажується з кешу. Подія дозволяє розробникам відстежувати, коли сторінка знову стає видимою і доступною для користувача, та виконувати певні дії при цьому.

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

Наприклад, ось як можна відстежити, чи сторінка була завантажена з кешу:

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log('Сторінка завантажена з кешу.');
  } else {
    console.log('Сторінка завантажена заново.');
  }
});

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

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

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

правити

Порада

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

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

Порада

Використання події pageshow допоможе вам оптимізувати ресурси, припиняючи непотрібні процеси під час приховання сторінки та відновлюючи їх, коли сторінка знову відображається. Це особливо корисно для односторінкових додатків (SPA).

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

Переглядач
	—

Приклади

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

<div id="timer">Демонстраційний елемент</div>

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // Оновлюємо таймер на сторінці після повернення з кешу
    let timer = document.getElementById('timer');
    let startTime = Date.now();
    
    setInterval(() => {
      let currentTime = Date.now();
      timer.innerText = `Минуло секунд: ${Math.floor((currentTime - startTime) / 1000)}`;
    }, 1000);
  }
});

window.addEventListener('pageshow', function (event) {
    if (!event.persisted) {
        console.log('Звичайне завантаження — питаємо сервер про свіжі дані.');

        fetch('/getLatestData')
            .then(response => response.json())
            .then(data => console.log('Отримані дані:', data))
            .catch(error => console.log('Сервер недоступний:', error.message));
    } else {
        console.log('Сторінка піднята з кешу назад/вперед.');
    }
});