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

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

hashchange — це подія, яка спрацьовує, коли змінюється частина URL після символа решітки (#), відома як фрагмент або "хеш". Ця подія важлива при розробці односторінкових застосунків (SPA), де різні стани сторінки можуть бути представлені через URL без повного перезавантаження сторінки. Наприклад, якщо URL змінюється з example.com/page#section1 на example.com/page#section2, подія hashchange спрацює, і ви зможете відреагувати на цю зміну.

Щоб працювати з подією hashchange, потрібно використовувати метод addEventListener, який прослуховує зміни в URL-адресі. Це дозволяє оновлювати контент сторінки, коли користувач навігує між різними частинами сайту, не перезавантажуючи сторінку. Ось приклад:

window.addEventListener('hashchange', function(event) {
  console.log('Новий хеш: ' + location.hash);
});

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

Подія hashchange також надає доступ до об'єкта event, який містить інформацію про зміну. У ньому є властивості oldURL і newURL, які дозволяють дізнатися, як саме змінився URL:

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

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

правити

Порада

Завжди перевіряйте значення location.hash безпосередньо в обробнику hashchange, оскільки в деяких випадках користувач може ввести некоректний хеш або вказати порожній хеш. Це допоможе уникнути помилок.

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

Порада

Подія hashchange не перезавантажує сторінку, тому використання її для навігації всередині однієї сторінки дозволяє зберігати стан сторінки і уникати втрати даних або часу на перезавантаження.

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

Порада

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

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

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

Синтаксис

window.addEventListener('hashchange', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

window.addEventListener('hashchange', function(event) {
  let activeTab = location.hash.replace('#', '');
  console.log('Активна вкладка: ' + activeTab);
});

window.addEventListener('hashchange', function() {
  if (location.hash === '#section1') {
    console.log('Показати секцію 1');
  } else if (location.hash === '#section2') {
    console.log('Показати секцію 2');
  }
});