JS властивість Event.oldURL

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

HashChangeEvent є подією JavaScript, яка спрацьовує, коли змінюється фрагмент URL (частина після символу #). Властивість oldURL містить URL, який був до зміни фрагмента. Це корисно для відстеження навігаційних змін на одній сторінці, наприклад, у SPA (Single Page Applications).

Коли користувач переходить від одного фрагмента до іншого на сторінці, об'єкт HashChangeEvent надає доступ до старого (oldURL) та нового URL (newURL). Це дозволяє отримати URL, що був до зміни, що допомагає контролювати історію навігації. Властивість oldURL повертає рядок, який представляє повний URL сторінки до зміни фрагмента.

Наприклад, щоб налаштувати подію для відстеження змін у URL-фрагменті:

window.addEventListener('hashchange', (event) => {
    console.log("Старий URL:", event.oldURL);
    console.log("Новий URL:", event.newURL);
});

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

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

правити

Порада

Пам'ятайте про повний формат URL. oldURL повертає повний URL з усіма компонентами (протокол, домен тощо). Це може бути корисно, якщо вам потрібна детальна інформація про стару сторінку, включаючи параметри запиту.

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

Порада

Використовуйте oldURL для керування історією в SPA. У SPA oldURL дозволяє впорядковувати історію переходів між фрагментами, що робить навігацію більш передбачуваною для користувача.

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

Порада

Перевіряйте коректність URL перед його використанням. У деяких випадках URL можуть містити некоректні символи, тому використовуйте decodeURIComponent для отримання чистого значення.

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

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

Синтаксис

event.oldURL

Переглядачі

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

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

Переглядач
	8	6	5.1	≤12.1	12	—

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

Переглядач
	4.4	18	6	5

Приклади

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

const historyStack = [];

window.addEventListener('hashchange', (event) => {
    historyStack.push(event.oldURL);
});

console.log(historyStack);

window.addEventListener('hashchange', (event) => {
    console.log(`Перейшли від: ${event.oldURL} до ${event.newURL}`);
});