JS об'єкт HashChange
Загальний опис
Подія HashChange використовується для відстеження змін в урлі після символу #, що дозволяє змінювати вміст сторінки або виконувати інші дії без перезавантаження. Зміни після # в 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 не змінюється. Також важливо пам'ятати, що зміни хеша не викликають перезавантаження сторінки, що робить подію корисною для розробки динамічних веб-додатків.
| Порада: | При використанні |
| Порада: | Не забувайте, що подія |
| Порада: | Для реалізації більш складних механізмів навігації у SPA (односторінкових додатках) можна використовувати хеші для визначення поточного стану. Це дозволяє користувачам копіювати та ділитися URL, що відображає конкретний стан додатка. |
Синтаксис
window.addEventListener('hashchange', function(event) {
// Ваш код
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
8 |
3.6 |
5 |
10.6 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
5 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє використання події hashchange для реалізації динамічної навігації між різними секціями сторінки. Користувач може натискати на кнопки для переходу між секціями. Кожен перехід змінює хеш у URL, а подія hashchange реагує на ці зміни та оновлює контент на сторінці без перезавантаження. Це простий і ефективний спосіб створити інтерактивні веб-додатки з односторінковою навігацією.
Цей код дозволяє перемикатися між різними секціями сторінки в залежності від хеша. Це зручно для створення розділеної навігації в односторінкових додатках.
window.addEventListener('hashchange', function() {
const section = location.hash.substring(1);
document.querySelectorAll('.section').forEach(el => {
el.style.display = (el.id === section) ? 'block' : 'none';
});
});Цей код дозволяє користувачеві вибирати між різними секціями додатка, і URL буде оновлюватися відповідно до вибору.
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;
});Методи
Властивості
newURL- Містить новий URL після зміни хеша на сторінці.
oldURL- Містить старий URL до зміни хеша на сторінці.