css.in.ua
Підтримати

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 не змінюється. Також важливо пам'ятати, що зміни хеша не викликають перезавантаження сторінки, що робить подію корисною для розробки динамічних веб-додатків.

Порада:

При використанні hashchange потрібно пам'ятати, що не завжди можна контролювати, яким чином користувач змінює хеш, тому варто обробляти всі можливі випадки зміни хеша. Оскільки зміни хеша не викликають перезавантаження сторінки, важливо використовувати цей механізм для односторінкових додатків або для реалізації зміни контенту без перезавантаження.
Порада:

Не забувайте, що подія hashchange може бути корисною для збереження стану сторінки при навігації між різними частинами додатка. Ви можете використовувати хеш як спосіб відслідковувати, на якій частині сайту знаходиться користувач.
Порада:

Для реалізації більш складних механізмів навігації у 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 до зміни хеша на сторінці.

Спільнота

Зв'язок