window.location

JavaScriptJunior~2 хв читання

window.location це об'єкт, який представляє поточний URL в адресному рядку браузера, і одночасно інструмент навігації. Його також називають просто location, бо префікс window. можна опустити.

Теорія

TL;DR

window.location зберігає адресу поточної сторінки і дозволяє нею керувати.
Читання: href, protocol, host, hostname, port, pathname, search, hash, origin.
Перехід: присвоєння location.href, location.assign(url), location.replace(url).
replace() не залишає запису в історії, тому кнопка «Назад» не спрацює.
location.reload() перезавантажує сторінку.
Query-параметри зручно розбирати через new URLSearchParams(location.search).
Зміна location.hash не перезавантажує сторінку і кидає подію hashchange.

Швидкий приклад

javascript

console.log(window.location);

Приклад виведення в консоль:

javascript

Location {
  href: "https://example.com/path/page.html?user=123#section",
  protocol: "https:",
  host: "example.com",
  pathname: "/path/page.html",
  search: "?user=123",
  hash: "#section"
}

Основні властивості

Властивість	Що повертає	Приклад
`href`	Повний URL	`"https://example.com/path?page=1#info"`
`protocol`	Протокол	`"https:"` або `"http:"`
`host`	Домен і порт	`"example.com"` або `"localhost:3000"`
`hostname`	Тільки домен	`"example.com"`
`port`	Номер порту	`"3000"`, якщо вказаний
`pathname`	Шлях після домену	`"/path/page.html"`
`search`	Рядок запиту (query params)	`"?page=1&sort=asc"`
`hash`	Якір (частина після `#`)	`"#section"`
`origin`	Тільки протокол, домен і порт	`"https://example.com"`

На практиці це виглядає так:

javascript

console.log(location.href);      // повна адреса сторінки
console.log(location.hostname);  // example.com
console.log(location.pathname);  // /articles/js
console.log(location.search);    // ?id=42
console.log(location.hash);      // #comments

Перенаправлення користувача

Змінити адресу сторінки можна кількома способами.

Спосіб 1: напряму змінити href

javascript

window.location.href = 'https://example.com/dashboard';

Повне перенаправлення, аналог кліку по посиланню.

Спосіб 2: метод assign()

javascript

window.location.assign('https://example.com/login');

Теж перенаправляє, але зберігає поточну сторінку в історії браузера. Тобто користувач може натиснути «Назад».

Спосіб 3: метод replace()

javascript

window.location.replace('https://example.com/logout');

Перенаправлення без збереження в історії, користувач не зможе повернутися назад кнопкою браузера.

Спосіб 4: перезавантажити сторінку

javascript

window.location.reload(); // оновити
window.location.reload(true); // (застаріле) примусово з сервера

Робота з query-параметрами

javascript

console.log(window.location.search); // "?user=42&theme=dark"

const params = new URLSearchParams(window.location.search);
console.log(params.get('user')); // "42"
console.log(params.get('theme')); // "dark"

URLSearchParams сам робить декодування, тому не треба вручну різати рядок по & і =.

Зміна hash

javascript

window.location.hash = '#about';

Це не перезавантажує сторінку, а просто прокручує до потрібного елемента з id="about" або кидає подію hashchange. Саме на цьому будувалася hash-навігація в старих SPA.

Підсумок

Що робить	Приклад
Отримує поточний URL	`location.href`
Змінює адресу сторінки	`location.href = 'https://example.com'`
Перенаправляє зі збереженням історії	`location.assign(url)`
Перенаправляє без історії	`location.replace(url)`
Оновлює сторінку	`location.reload()`
Дістає query-параметри	`location.search`, `URLSearchParams`
Змінює hash без перезавантаження	`location.hash = '#id'`

Коротко: window.location це «адресний рядок JavaScript». З ним можна дізнатися, де ти знаходишся, перейти куди треба, оновити сторінку або змінити частину URL без перезавантаження.

Типові помилки

Плутати assign() і replace(). Після replace() кнопка «Назад» не поверне користувача на попередню сторінку, тому її беруть для logout і редіректів після оплати, а не для звичайної навігації.
Різати location.search вручну. split('&') ламається на закодованих значеннях і на порожніх параметрах, для цього є URLSearchParams.
Плутати host і hostname. host містить порт (localhost:3000), hostname ні (localhost).
Використовувати location.href = ... в SPA. Це повне перезавантаження додатка, для внутрішньої навігації потрібен history.pushState() або роутер фреймворку.
Покладатися на location.reload(true). Аргумент застарілий і сучасні браузери його ігнорують, обхід кешу робиться заголовками або версійним параметром в URL.
Записувати в location дані від користувача без перевірки. Це відкритий редірект: адресу треба звіряти зі списком дозволених або залишати тільки відносний шлях.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.