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);
});
Ця подія допомагає легко відстежувати зміни навігації без необхідності використовувати додаткові фреймворки або перезавантаження сторінки, роблячи інтерфейс користувача більш інтерактивним і швидким. Вона також підтримується в усіх сучасних браузерах, тому її можна безпечно використовувати.
| Порада: | Можна використовувати |
| Порада: | Подія |
| Порада: | Завжди перевіряйте значення |
Синтаксис
window.addEventListener('hashchange', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує інтерактивну роботу з подією hashchange, де користувач може перемикати вкладки за допомогою кнопок. При натисканні на кожну кнопку змінюється хеш в URL, і в залежності від хешу оновлюється контент на сторінці.
Цей приклад демонструє, як можна змінювати контент сторінки в залежності від поточного хешу. Наприклад, при зміні хешу на #section1, показується відповідний контент. Це корисно для сайтів з великою кількістю розділів або вкладок.
window.addEventListener('hashchange', function() {
if (location.hash === '#section1') {
console.log('Показати секцію 1');
} else if (location.hash === '#section2') {
console.log('Показати секцію 2');
}
});У цьому прикладі хеш використовується для зберігання інформації про активну вкладку. Це дає можливість зберігати стан вкладки навіть при оновленні сторінки або при використанні кнопок браузера "назад" і "вперед". Такий підхід корисний для організації вкладок у веб-додатках без повного перезавантаження сторінки.
window.addEventListener('hashchange', function(event) {
let activeTab = location.hash.replace('#', '');
console.log('Активна вкладка: ' + activeTab);
});