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) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	8	3.6	5	10.6	12	8

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

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

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

Переглядач
	—

Приклади

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

<header>
  <h2 class="title">hashchange</h2>
  <p class="description">Подія, яка спрацьовує при зміні фрагмента URL після решітки (#).</p>
</header>
<main>
  <div class="tabs">
    <button id="tab1" class="tab-button">Вкладка 1</button>
    <button id="tab2" class="tab-button">Вкладка 2</button>
    <button id="tab3" class="tab-button">Вкладка 3</button>
  </div>
  <div class="result">
    <h3 id="content-title">Виберіть вкладку</h3>
    <p id="content-text">Тут буде показаний контент вибраної вкладки.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.tabs {
  margin-bottom: 20px;
}

.tab-button {
  padding: 10px 15px;
  font-size: 16px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #eaeaea;
}

.tab-button:hover {
  background-color: #d8d8d8;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px rgba(118, 118, 118, 1);
}

h3 {
  margin-top: 0;
}

// Функція для оновлення контенту на основі хешу
function updateContent() {
  const hash = location.hash;

  const contentTitle = document.getElementById('content-title');
  const contentText = document.getElementById('content-text');

  switch (hash) {
    case '#tab1':
      contentTitle.textContent = 'Вкладка 1';
      contentText.textContent = 'Це контент для Вкладки 1.';
      break;
    case '#tab2':
      contentTitle.textContent = 'Вкладка 2';
      contentText.textContent = 'Це контент для Вкладки 2.';
      break;
    case '#tab3':
      contentTitle.textContent = 'Вкладка 3';
      contentText.textContent = 'Це контент для Вкладки 3.';
      break;
    default:
      contentTitle.textContent = 'Виберіть вкладку';
      contentText.textContent = 'Тут буде показаний контент вибраної вкладки.';
      break;}

}

// Прослуховування події hashchange
window.addEventListener('hashchange', updateContent);

// Налаштування кнопок для зміни хешу
document.getElementById('tab1').addEventListener('click', () => {
  location.hash = '#tab1';
});

document.getElementById('tab2').addEventListener('click', () => {
  location.hash = '#tab2';
});

document.getElementById('tab3').addEventListener('click', () => {
  location.hash = '#tab3';
});

// Оновлення контенту при першому завантаженні сторінки
updateContent();
//# sourceURL=pen.js

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');
  }
});