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 з усіма компонентами (протокол, домен тощо). Це може бути корисно, якщо вам потрібна детальна інформація про стару сторінку, включаючи параметри запиту.
Порада:	Використовуйте `oldURL` для керування історією в SPA. У SPA `oldURL` дозволяє впорядковувати історію переходів між фрагментами, що робить навігацію більш передбачуваною для користувача.
Порада:	Перевіряйте коректність URL перед його використанням. У деяких випадках URL можуть містити некоректні символи, тому використовуйте `decodeURIComponent` для отримання чистого значення.

Синтаксис

event.oldURL

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

У цьому прикладі всі попередні URL зберігаються в масиві historyStack, що може бути корисним для відстеження дій користувача. Наприклад, цей масив можна використовувати для створення кнопки "Назад".

const historyStack = [];

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

console.log(historyStack);

Тут відслідковується кожна зміна фрагмента та зберігається як лог переходів. Це може бути корисно для аналізу навігації користувачів між різними частинами сторінки та подальшої оптимізації UX.

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

JS довідник

JavaScript

Наповнення JS розділу