JS властивість Window.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, не призводять до негайного перезавантаження сторінки, але вони можуть вплинути на поведінку кнопок "Назад" та "Вперед" браузера. Розробникам слід ретельно планувати використання цих методів, щоб забезпечити інтуїтивно зрозумілу та ефективну навігацію в додатку.

правити

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

Методи back() і forward() роблять те саме, що кнопки браузера.

Але по-справжньому важливий тут pushState(). Він змінює адресу в рядку браузера, не перезавантажуючи сторінку — і саме на цьому побудовані всі односторінкові застосунки: вміст підмінюється кодом, а адреса лишається чесною, її можна скопіювати й надіслати.

Коли користувач тисне «Назад», спрацьовує подія popstate — і застосунок має сам відновити попередній стан. Забув обробник — і кнопка «Назад» просто перестане працювати, що бісить людей найбільше.

replaceState() не додає запис, а замінює поточний — зручно, коли міняється лише фільтр, і засмічувати історію не варто.

правити

Порада

Використовуйте методи 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

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

Переглядач
	—

Приклади

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

<header>
    <h2 class="title">Window.history Property</h2>
    <p class="description">Ця властивість дозволяє контролювати історію браузера та навігацію користувача.</p>
</header>
<main>
    <div class="result">
        <button id="goBackButton">Назад</button>
        <button id="goForwardButton">Вперед</button>
    </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-right: 10px;
}

document.addEventListener("DOMContentLoaded", function () {
  var goBackButton = document.getElementById("goBackButton");
  var goForwardButton = document.getElementById("goForwardButton");

  goBackButton.addEventListener("click", function () {
    // Переходимо на попередню сторінку в історії браузера
    window.history.back();
  });

  goForwardButton.addEventListener("click", function () {
    // Переходимо на наступну сторінку в історії браузера
    window.history.forward();
  });
});
//# sourceURL=pen.js

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

function render(page) {
    console.log('Малюємо сторінку', page);
}

try {
    // змінили адресу, сторінку не перезавантажили
    history.pushState({ page: 2 }, '', '?page=2');

    // без цього обробника кнопка «Назад» зламається
    window.addEventListener('popstate', event => {
        const page = (event.state && event.state.page) || 1;
        render(page);
    });

    // фільтр змінився — історію не засмічуємо
    history.replaceState({ page: 2, sort: 'new' }, '', '?page=2&sort=new');

    history.back(); // як кнопка «Назад»
} catch (error) {
    console.log('У пісочниці зміна історії заборонена:', error.name);
}

// Отримуємо поточний 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);
});