JS об'єкт HashChangeEvent
Загальний опис
Подія HashChangeEvent використовується для відстеження змін в урлі після символу #, що дозволяє змінювати вміст сторінки або виконувати інші дії без перезавантаження. Зміни після # в URL часто використовуються в односторінкових додатках для навігації між різними станами або секціями сторінки.
Подія hashchange спрацьовує, коли змінюється частина URL, що йде після знака #. Цю подію можна використати для реагування на зміни в адресі без необхідності перезавантажувати сторінку. Наприклад, вона корисна для навігації по різних розділах сайту або в односторінкових додатках.
Щоб обробити подію, достатньо додати обробник через метод addEventListener. Ось приклад:
window.addEventListener('hashchange', function(event) {
console.log('Новий хеш:', location.hash);
});
В обробнику події можна отримати новий хеш за допомогою location.hash, що дає змогу виконувати необхідні дії, коли частина після # змінюється.
window.addEventListener('hashchange', function(event) {
const newHash = location.hash; // отримаємо новий хеш
document.getElementById('content').innerText = 'Ви зараз на сторінці ' + newHash;
});
Цей код дозволяє змінювати контент на сторінці, залежно від значення хеша в URL.
Однією з особливостей є те, що подія не спрацьовує, якщо хеш в URL не змінюється. Також важливо пам'ятати, що зміни хеша не викликають перезавантаження сторінки, що робить подію корисною для розробки динамічних веб-додатків.
автор: Bond
- Порада
-
Для реалізації більш складних механізмів навігації у SPA (односторінкових додатках) можна використовувати хеші для визначення поточного стану. Це дозволяє користувачам копіювати та ділитися URL, що відображає конкретний стан додатка.
автор: Bond - Порада
-
При використанні
автор: Bondhashchangeпотрібно пам'ятати, що не завжди можна контролювати, яким чином користувач змінює хеш, тому варто обробляти всі можливі випадки зміни хеша. Оскільки зміни хеша не викликають перезавантаження сторінки, важливо використовувати цей механізм для односторінкових додатків або для реалізації зміни контенту без перезавантаження. - Порада
-
Не забувайте, що подія
автор: Bondhashchangeможе бути корисною для збереження стану сторінки при навігації між різними частинами додатка. Ви можете використовувати хеш як спосіб відслідковувати, на якій частині сайту знаходиться користувач.
Синтаксис
window.addEventListener('hashchange', function(event) {
// Ваш код
});властивості
| Властивість | Опис |
|---|---|
| newURL | Містить новий URL після зміни хеша на сторінці. |
| oldURL | Містить старий URL до зміни хеша на сторінці. |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 8 | 3.6 | 5 | 10.6 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей код дозволяє користувачеві вибирати між різними секціями додатка, і URL буде оновлюватися відповідно до вибору.
HTML
<button id="button1">Натисни</button>
<button id="button2">Натисни</button>
<div id="content">Демонстраційний елемент</div>JS
document.getElementById('button1').addEventListener('click', function() {
location.hash = '#section1';
});
document.getElementById('button2').addEventListener('click', function() {
location.hash = '#section2';
});
window.addEventListener('hashchange', function() {
const hash = location.hash.substring(1);
document.getElementById('content').innerText = 'Ви вибрали: ' + hash;
});Цей код дозволяє перемикатися між різними секціями сторінки в залежності від хеша. Це зручно для створення розділеної навігації в односторінкових додатках.
HTML
<div class="section">перший елемент section</div>
<div class="section">другий елемент section</div>JS
window.addEventListener('hashchange', function() {
const section = location.hash.substring(1);
document.querySelectorAll('.section').forEach(el => {
el.style.display = (el.id === section) ? 'block' : 'none';
});
});Цей приклад демонструє використання події hashchange для реалізації динамічної навігації між різними секціями сторінки. Користувач може натискати на кнопки для переходу між секціями. Кожен перехід змінює хеш у URL, а подія hashchange реагує на ці зміни та оновлює контент на сторінці без перезавантаження. Це простий і ефективний спосіб створити інтерактивні веб-додатки з односторінковою навігацією.
HTML
<header>
<h2 class="title">Використання події HashChange</h2>
<p class="description">Цей приклад показує, як використовувати подію HashChange для зміни контенту без перезавантаження сторінки.</p>
</header>
<main>
<div class="result">
<div class="navigation">
<button id="btnSection1">Перейти до Секції 1</button>
<button id="btnSection2">Перейти до Секції 2</button>
<button id="btnSection3">Перейти до Секції 3</button>
</div>
<div id="content" class="content">
Виберіть секцію для перегляду.
</div>
</div>
</main>CSS
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 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;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.navigation {
margin-bottom: 15px;
}
button {
padding: 10px 15px;
margin-right: 10px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
.content {
padding: 20px;
background-color: #eaeaea;
border-radius: 5px;
}JS
// Отримуємо елементи кнопок і контенту
const btnSection1 = document.getElementById('btnSection1');
const btnSection2 = document.getElementById('btnSection2');
const btnSection3 = document.getElementById('btnSection3');
const content = document.getElementById('content');
// Функція для оновлення контенту залежно від хеша
function updateContent() {
const hash = location.hash.substring(1); // отримуємо хеш з URL
if (hash === 'section1') {
content.innerHTML = '<h3>Секція 1</h3><p>Контент першої секції.</p>';
} else if (hash === 'section2') {
content.innerHTML = '<h3>Секція 2</h3><p>Контент другої секції.</p>';
} else if (hash === 'section3') {
content.innerHTML = '<h3>Секція 3</h3><p>Контент третьої секції.</p>';
} else {
content.innerHTML = 'Виберіть секцію для перегляду.';
}
}
// Додаємо обробники для кнопок
btnSection1.addEventListener('click', function () {
location.hash = 'section1'; // змінюємо хеш на section1
});
btnSection2.addEventListener('click', function () {
location.hash = 'section2'; // змінюємо хеш на section2
});
btnSection3.addEventListener('click', function () {
location.hash = 'section3'; // змінюємо хеш на section3
});
// Додаємо обробник події hashchange
window.addEventListener('hashchange', updateContent);
// Оновлюємо контент при завантаженні сторінки
updateContent();
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!