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