JS властивість Object.history

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

Window.history - це властивість об'єкта Window у JavaScript, яка надає доступ до історії сесії браузера, зокрема, до стеку історії (history stack). Ця властивість є частиною Browsing History API і дозволяє розробникам керувати навігацією та історією сторінок у межах одного сеансу браузера. Основна користь полягає у можливості програмного керування історією переходів користувача в межах одного веб-додатку, що робить взаємодію з додатком більш гнучкою та контрольованою.

Використання Window.history включає методи, які дозволяють додавати, змінювати та переміщуватися по записам історії. Наприклад, метод history.pushState() дозволяє додати запис у історію переходів, а history.back() - повернутися на одну сторінку назад, що імітує натискання кнопки "Назад" у браузері.

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

// Додавання нового запису до історії
history.pushState({page: 1}, "title 1", "?page=1");

// Повернення на один крок назад у історії
history.back();

Складніший приклад:

// Змінення поточного стану
history.replaceState({page: 2}, "title 2", "?page=2");

// Перехід на два кроки вперед у історії
history.go(2);

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

Давайте детальніше розглянемо методи:

1. history.pushState(state, title, [url]) - цей метод дозволяє додати запис до історії сесії без перезавантаження сторінки. Аргумент state - об'єкт, який відноситься до нового стану, title - заголовок стану (більшість браузерів це ігнорують), і url - нова URL-адреса.

2. history.replaceState(state, title, [url]) - замінює поточний запис у історії на новий, з аналогічними параметрами, що й у pushState.

3. history.back() - емулює натискання кнопки "Назад" у браузері.

4. history.forward() - емулює натискання кнопки "Вперед".

5. history.go(delta) - переміщується на кілька кроків вперед або назад у історії, в залежності від знаку і величини delta.

Важливо пам'ятати, що зміни в історії, зроблені за допомогою Window.history, не призводять до негайного перезавантаження сторінки, але вони можуть вплинути на поведінку кнопок "Назад" та "Вперед" браузера. Розробникам слід ретельно планувати використання цих методів, щоб забезпечити інтуїтивно зрозумілу та ефективну навігацію в додатку.

правити

Порада

Використовуйте методи history.back(), history.forward() та history.go() для навігації по історії перегляду. Це може бути корисно для створення кнопок "назад" та "вперед" на вашому сайті.

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

Порада

Використовуйте властивість history.length для отримання інформації про кількість сторінок в історії перегляду. Це може бути корисно, наприклад, для визначення, чи користувач прийшов на сторінку безпосередньо або через перегляд інших сторінок.

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

Порада

Будьте уважні, використовуючи history для зміни URL, оскільки це може вплинути на очікуваний потік навігації користувача. Наприклад, метод history.pushState() дозволяє додати запис до історії без перезавантаження сторінки, але його слід використовувати з обережністю.

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

Порада

Для SPA, де навігація контролюється JavaScript, history є незамінним для управління станами URL. Це дозволяє користувачам використовувати кнопки навігації браузера без перезавантаження всього додатку.

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

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

Синтаксис

window.history

Переглядачі

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

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

Переглядач
	1	1	1	3	12	4

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

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

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

Переглядач
	—

Приклади

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

// Перевіряємо, чи історія браузера має попередню сторінку
if (window.history.length > 1) {
    // Додаємо кнопку "Назад" на сторінку
    var backButton = document.createElement("button");
    backButton.textContent = "Назад";
    backButton.addEventListener("click", function() {
        // Переходимо на попередню сторінку в історії браузера
        window.history.back();
    });
    document.body.appendChild(backButton);
}

// Отримуємо поточний URL
var currentURL = window.location.href;

// Додаємо кнопку "Змінити URL"
var changeURLButton = document.createElement("button");
changeURLButton.textContent = "Змінити URL";
changeURLButton.addEventListener("click", function() {
    // Генеруємо новий URL
    var newURL = currentURL + "?new_param=123";

    // Додаємо запис до історії браузера і змінюємо URL без перезавантаження
    window.history.pushState(null, null, newURL);
});
document.body.appendChild(changeURLButton);

// Обробляємо подію зміни URL
window.addEventListener("popstate", function(event) {
    // Відобразити поточний URL в консолі
    console.log("Поточний URL: " + window.location.href);
});