JS властивість Event.newURL
Загальний опис
newURL — це властивість об’єкта HashChangeEvent, яка повертає повний URL-адресу сторінки після зміни хешу (частини після знаку #). Подія HashChangeEvent виникає кожного разу, коли змінюється частина URL після знака #, і newURL дозволяє отримати нову URL-адресу після такої зміни. Це може бути корисним для відстеження внутрішньої навігації на одній сторінці, особливо у випадках, коли використовується хеш-адресація для навігації або динамічного завантаження контенту.
Коли користувач змінює хеш вручну або при переході за посиланням із хешем, браузер генерує об’єкт HashChangeEvent. Властивості oldURL і newURL надають доступ до повної URL-адреси до і після зміни хешу, що дозволяє розробнику реалізувати відповідні реакції на зміну хешу.
window.addEventListener('hashchange', (event) => {
console.log('Новий URL:', event.newURL);
console.log('Старий URL:', event.oldURL);
});
У цьому прикладі подія hashchange прослуховується на об’єкті window, і коли відбувається зміна хешу, консоль виводить нову та стару URL-адреси. Це особливо корисно для реалізації односторінкових додатків (SPA), де зміни хешу можуть відповідати різним розділам контенту або станам додатка.
| Порада: | Подія |
| Порада: |
|
| Порада: | Щоб відстежити перехід на конкретний хеш, перевіряйте значення |
Синтаксис
event.newURLЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
8 |
6 |
5.1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
6 |
5 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад використовує newURL, щоб отримати новий хеш і визначити, до якого розділу перейшов користувач. Це підходить для створення SPA, де кожен хеш відповідає певному розділу додатку.
window.addEventListener('hashchange', (event) => {
const newHash = new URL(event.newURL).hash;
if (newHash === '#section1') {
console.log('Перехід до секції 1');
// Логіка для відображення контенту секції 1
} else if (newHash === '#section2') {
console.log('Перехід до секції 2');
// Логіка для відображення контенту секції 2
}
});Цей приклад демонструє, як можна отримати як старий, так і новий хеші для створення повідомлення про зміну. Це може бути корисним для інтерфейсів, де потрібно знати, з якого стану був виконаний перехід, що допоможе коректно оновити додаток або контент на сторінці.
window.addEventListener('hashchange', (event) => {
const previousSection = new URL(event.oldURL).hash;
const currentSection = new URL(event.newURL).hash;
console.log(`Повернулися з ${previousSection} до ${currentSection}`);
// Логіка для оновлення інтерфейсу, відображаючи різні секції чи статуси
});