css.in.ua
Підтримати

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), де зміни хешу можуть відповідати різним розділам контенту або станам додатка.

Порада:

Подія hashchange не активується при першому завантаженні сторінки. Якщо вам потрібно обробити хеш під час завантаження, використовуйте window.location.hash безпосередньо.
Порада:

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

Щоб відстежити перехід на конкретний хеш, перевіряйте значення newURL і застосовуйте регулярні вирази для конкретних шаблонів. Це допоможе динамічно реагувати на різні типи хешів, наприклад, #profile або #settings.

Синтаксис

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}`);
  // Логіка для оновлення інтерфейсу, відображаючи різні секції чи статуси
});

Спільнота

Зв'язок