JavaScript URL.hash — якір адреси

Властивість hash повертає якір — усе після решітки, разом із нею самою.

правити

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

Ключова особливість: якір не надсилається на сервер. Він існує лише в браузері — саме тому зміна якоря не перезавантажує сторінку.

Історично на цьому будували маршрутизацію односторінкових застосунків (#/page/2), поки не з'явився history.pushState().

Порожній якір — це порожній рядок, а не undefined.

правити

Нотатка

Не клади в якір нічого таємного: він лишається в історії браузера й у закладках, хоч на сервер і не йде.

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

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

Переглядачі

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

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

Переглядач
hash	32+	26+	7+	19+	12+	-

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

Переглядач
hash	32+	yes	yes	7+

Приклади

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

const url = new URL('https://css.in.ua/css/property/gap#приклади');

console.log(url.hash); // '#%D0%BF%D1%80...' — екранований
console.log(decodeURIComponent(url.hash)); // '#приклади'

// зміна якоря НЕ перезавантажує сторінку
location.hash = '#top';

window.addEventListener('hashchange', () => {
    console.log('Якір змінився на', location.hash);
});