css.in.ua
Підтримати

JS об'єкт PopState

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

PopState Events – це подія 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.
Порада:

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

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

Синтаксис

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

Переглядачі

Переглядач

4

4

6

12.1

12
Переглядач

4.4

18

4

6
Переглядач

-

-

Приклади


Цей код створює просту навігацію між трьома розділами: "Головна", "Про нас" та "Контакти". При натисканні на одну з кнопок вміст змінюється, а новий стан додається до історії браузера. Якщо користувач натискає кнопку "Назад", подія popstate обробляє зміну і оновлює контент у відповідності з попереднім станом.

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

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

function goToSection(section) {
  history.pushState({ section: section }, "", `#${section}`);
}

goToSection('contacts');

Цей приклад змінює заголовок (title) сторінки та адресу в адресному рядку без перезавантаження. Коли користувач переходить назад або вперед, popstate оновлює заголовок залежно від записаного стану.

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

function updatePage(title, url) {
  history.pushState({ title: title }, title, url);
  document.title = title;
}

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

Методи

Властивості

state
Містить дані стану, що було збережено у відповідному записі історії. Ці дані передаються у методи `history.pushState()` або `history.replaceState()`, що дозволяє зберігати інформацію про стан сторінки та використовувати її при навігації назад або вперед у історії браузера.

Спільнота

Зв'язок