location.hash в JavaScript — частина URL після символу #

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

Властивість hash об'єкта Location відіграє важливу роль у веб-розробці, особливо у контексті взаємодії з URL адресами сторінок. Вона надає доступ до частини URL, яка слідує після символу дієзу (#), відомої як "hash" або "anchor". Ця частина URL часто використовується для вказівки на певний елемент або розділ в межах веб-сторінки, а також у розробці односторінкових додатків (SPA) для управління навігацією без перезавантаження сторінки.

Властивість hash важлива для розробників, які хочуть контролювати або відслідковувати стан веб-сторінки на основі URL. Вона особливо корисна у сценаріях, коли потрібно здійснити навігацію до певного розділу сторінки або управління станом додатка в SPA без повного перезавантаження сторінки.

Простий приклад використання hash може бути наступним:

function displayCurrentHash() {
    console.log("Current hash is:", window.location.hash);
}

У цьому коді, функція displayCurrentHash() використовує властивість hash об'єкта location для відображення поточного значення "hash" у консолі браузера. Це може бути корисно для відладки або відстеження змін у частині URL після символу #.

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

window.addEventListener('hashchange', function() {
    if (window.location.hash === '#section1') {
        loadSection1();
    } else if (window.location.hash === '#section2') {
        loadSection2();
    }
    // Інші умови для різних розділів
});

У цьому прикладі, обробник події hashchange використовується для відслідковування змін у hash. Коли користувач переміщується до різних частин SPA, різні функції викликаються в залежності від значення hash.

Важливо розуміти, що зміна hash не спричиняє перезавантаження сторінки, що робить її ідеальною для використання в SPA та інших випадках, де потрібно зберегти стан сторінки. Також, використання hash дозволяє користувачам ділитися посиланнями, які вказують на конкретні розділи або стан веб-сторінки.

Загалом, властивість hash є потужним інструментом у розробці веб-сайтів та додатків. Вона дозволяє створювати більш гнучку та інтерактивну навігацію, поліпшуючи загальний досвід користувача та надаючи розробникам додаткові можливості для управління станом та поведінкою веб-сторінки.

правити

Порада

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

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

Порада

Пам'ятайте, що зміна location.hash не спричиняє перезавантаження сторінки, але додає запис у історію браузера. Це дозволяє користувачам повертатися до попередніх станів за допомогою кнопки "Назад" у браузері.

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

Порада

Якщо ви використовуєте location.hash для навігації, важливо правильно обробляти зміну хешу, наприклад, оновлюючи вміст сторінки або відображення відповідного розділу, коли хеш змінюється.

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

Порада

Для відстеження змін у location.hash, можна використовувати подію hashchange вікна. Це дозволить динамічно реагувати на зміни фрагмента URL і забезпечити більш інтерактивний користувацький досвід, особливо в складних веб-додатках.

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

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

Синтаксис

location.hash

Переглядачі

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

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

Переглядач
	1	1	1	≤12.1	12	3

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

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

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

Переглядач
	1.7*

Приклади

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

window.addEventListener('hashchange', function() {
  if (window.location.hash === '#about') {
    displayAboutSection();
  } else if (window.location.hash === '#contact') {
    displayContactSection();
  }
});

function displayAboutSection() {
  // Код для відображення розділу "Про нас"
}

function displayContactSection() {
  // Код для відображення розділу "Контакти"
}

<header>
  <h2 class="title">Location.hash</h2>
  <p class="description">Повертає або встановлює якір (частину URL після символу '#').</p>
</header>
<main>
  <div class="result">
    <button id="setHashBtn">Встановити Якір #about</button>
    <p id="currentHash">Поточний якір: </p>
  </div>
</main>

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

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

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

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

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

button {
  margin: 5px;
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

document.getElementById('setHashBtn').addEventListener('click', function () {
  window.location.hash = 'about';
  updateCurrentHashDisplay();
});

window.addEventListener('hashchange', updateCurrentHashDisplay);

function updateCurrentHashDisplay() {
  document.getElementById('currentHash').textContent = "Поточний якір: " + window.location.hash;
}

updateCurrentHashDisplay();
//# sourceURL=pen.js

function displayCurrentHash() {
  console.log("Поточний якір: " + window.location.hash);
}