JS властивість History.length

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

Властивість length об'єкта History відіграє критичну роль у взаємодії з історією навігації веб-браузера у контексті JavaScript. Ця властивість надає інформацію про кількість елементів у стеку історії браузера для поточного вікна або вкладки. Використання length дозволяє розробникам отримувати цінне уявлення про історію навігації користувача, що може бути використане для прийняття рішень у коді, наприклад, щодо можливостей навігації або поведінки кнопок "Назад" та "Вперед".

Значення length важливе у розробці веб-додатків, особливо у Single Page Applications (SPA), де керування історією навігації є ключовим елементом для забезпечення плавної та зрозумілої навігації для користувача. За допомогою length, можна розуміти, чи має користувач історію переглядів, куди можна повернутися, або визначити, скільки кроків назад або вперед вони можуть здійснити.

Для базового використання, length може бути просто запитаний для отримання кількості елементів у історії. Наприклад:

function getHistoryLength() {
    return window.history.length;
}

У цьому коді, функція getHistoryLength() повертає кількість сторінок в історії браузера для поточного вікна або вкладки.

У складніших сценаріях, властивість length може бути використана для умовної логіки, наприклад, для визначення чи активувати кнопку "Назад" в SPA. Це може бути корисно, коли SPA мімікрує традиційну багатосторінкову навігацію, але все ще потребує контролювати переходи між сторінками всередині одного HTML-документа.

Наприклад:

function updateBackButton() {
    const backButton = document.getElementById('back-button');
    backButton.disabled = window.history.length <= 1;
}

У цьому прикладі, якщо length історії дорівнює одиниці або менше, це означає, що користувач не має історії назад у даному вікні, і тому кнопка "Назад" деактивується.

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

Загалом, властивість length є важливим інструментом для розробників JavaScript, який дозволяє створювати більш інтуїтивні та зрозумілі веб-додатки. Використовуючи цю властивість, можна ретельно контролювати навігаційні можливості та вдосконалювати взаємодію з користувачем.

правити

Порада

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

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

Порада

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

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

Порада

Перед використанням методів навігації, таких як history.back() або history.forward(), рекомендується перевірити значення history.length. Це запобігає спробам переміщення користувача по історії, якщо в ній недостатньо записів для такого переміщення.

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

Порада

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

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

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

Синтаксис

History.length

Переглядачі

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

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

Переглядач
	1	1	1	≤12.1	12	10

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

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

Приклади

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

function navigateHomeIfManyPagesVisited() {
    console.log('Записів в історії вкладки:', window.history.length);

    if (window.history.length > 5) {
        console.log('Історія довга — час запропонувати головну');
        // window.location.href = '/'; — сам перехід у житті виглядає так
    }
}

navigateHomeIfManyPagesVisited();

function printHistoryLength() {
  console.log("Кількість сторінок у історії: " + window.history.length);
}

printHistoryLength();