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` чудово працює для оновлення динамічного контенту. Наприклад, якщо на вашій сторінці показуються живі дані або лічильники, варто перевіряти та оновлювати їх при кожному показі сторінки, щоб інформація була актуальною.
Порада:	Використання події `pageshow` допоможе вам оптимізувати ресурси, припиняючи непотрібні процеси під час приховання сторінки та відновлюючи їх, коли сторінка знову відображається. Це особливо корисно для односторінкових додатків (SPA).
Порада:	Розумно поєднувати події `pageshow` і `pagehide` для повного контролю над поведінкою сторінки під час її приховання та повернення. Це дозволяє створювати більш гнучкі та оптимізовані для користувача додатки.

Синтаксис

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

Значення

Return

Переглядачі

Переглядач
	66	57	11.1	53	16

Переглядач
	66	66	57	11.3

Переглядач
	15.0.0	1.0

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

window.addEventListener('pageshow', function(event) {
  if (!event.persisted) {
    console.log('Підключення до сервера для оновлення даних.');
    fetch('/getLatestData')
      .then(response => response.json())
      .then(data => {
        console.log('Отримані дані:', data);
      });
  }
});

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

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);
  }
});

JS довідник

JavaScript

Наповнення JS розділу