JS об'єкт PopStateEvent

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

PopStateEvent – це подія JavaScript, що дозволяє обробляти зміни в історії перегляду сторінок у браузері. Подія popstate виникає, коли користувач взаємодіє з історією перегляду, зокрема, переходить назад або вперед. Ця подія корисна для SPA-додатків (односторінкових додатків), оскільки дозволяє змінювати стан сторінки відповідно до URL без перезавантаження.

Щоб працювати з popstate, можна додати обробник події за допомогою window.addEventListener('popstate', callback). При виникненні події popstate, передана у callback функція отримує об’єкт події, який містить властивість state. Ця властивість повертає стан, який було збережено за допомогою методу history.pushState() або history.replaceState() під час останнього оновлення URL. Завдяки state, можна дізнатися, яку інформацію збережено в історії, що допомагає коректно оновити сторінку.

Приклад роботи з popstate:

window.addEventListener('popstate', function(event) {
  if (event.state) {
    console.log("Поточний стан:", event.state);
  } else {
    console.log("Немає стану для цієї URL.");
  }
});

Основними методами для збереження стану є history.pushState(state, title, url) та history.replaceState(state, title, url). Вони дозволяють створювати новий запис в історії браузера або змінювати поточний запис без перезавантаження сторінки. pushState додає новий запис, тоді як replaceState змінює останній.

Приклад використання pushState:

history.pushState({page: 1}, "Сторінка 1", "/page1");

Після виклику pushState, якщо користувач натисне кнопку "Назад" у браузері, подія popstate спрацює, і програма зможе відреагувати відповідно.

правити

Порада

Попередньо визначайте обробку стану. Щоб уникнути помилок, завжди перевіряйте event.state на наявність даних перед тим, як працювати з ним. Це запобіжить помилкам, коли стан не визначений для певного URL.

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

Порада

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

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

Порада

Для відстеження навігації враховуйте кілька видів подій. Наприклад, popstate може не спрацювати при безпосередній зміні URL у адресному рядку. Щоб це врахувати, додайте обробники hashchange або beforeunload.

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

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

Синтаксис

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

властивості

Переглядачі

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

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

Переглядач
	4	4	6	12.1	12

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

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

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

Переглядач
	-	-

Приклади

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

window.addEventListener('popstate', function (event) {
    if (event.state && event.state.section) {
        console.log('Перехід до розділу:', event.state.section);
    }
});

function goToSection(section) {
    // у пісочниці із захисним sandbox зміна історії заборонена
    try {
        history.pushState({ section: section }, '', '#' + section);
        console.log('Додано запис історії:', section);
    } catch (error) {
        console.log('pushState заборонено в цьому середовищі:', error.name);
    }
}

goToSection('contacts');

window.addEventListener('popstate', function (event) {
    document.title = event.state ? event.state.title : 'Головна сторінка';
});

function updatePage(title, url) {
    try {
        history.pushState({ title: title }, title, url);
        document.title = title;
        console.log('Заголовок і адресу оновлено:', title);
    } catch (error) {
        console.log('pushState заборонено в цьому середовищі:', error.name);
    }
}

updatePage('Сторінка про нас', '/about');