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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.newURL

Переглядачі

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

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

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

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

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

Приклади

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

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