Что такое window.location.href в JavaScript: свойства, методы и примеры

hannadev

Window.location.href — это свойство объекта window.location в JavaScript, которое возвращает или устанавливает полный URL текущей страницы. Оно помогает разработчикам читать адрес страницы и перенаправлять пользователя без перезагрузки всей страницы. Это решает задачи вроде динамической навигации, проверки параметров URL и создания SPA-приложений.

С его помощью можно легко анализировать, откуда пришел пользователь, или отправить его на другую страницу. Полезно для фронтенд-разработки, когда нужно работать с адресной строкой браузера. Давайте разберем, как это работает на практике.

Как работает window.location.href

Объект window.location — это часть BOM (Browser Object Model), которая дает доступ к информации о текущем URL. Свойство href содержит полную строку адреса, включая протокол, домен, путь, параметры и якорь. Когда вы присваиваете новое значение href, браузер автоматически загружает указанную страницу и добавляет запись в историю.

Например, если страница открыта по адресу https://example.com/page?id=123#section, то window.location.href вернет именно эту строку. Это удобно для условной логики: проверяем URL и показываем разный контент. А если нужно перенаправить — просто пишем window.location.href = ‘новый_url’. Но учтите, что это вызывает навигацию, как обычный клик по ссылке.

Получение URL: console.log(window.location.href); — выведет текущий адрес в консоль.
Изменение URL: window.location.href = ‘https://example.com/new-page’; — перенаправит пользователя.
Проверка параметров: if (window.location.href.includes(‘id=123’)) { /* код */ } — выполнит действие при наличии параметра.

Свойство	Описание	Пример значения
href	Полный URL	https://example.com/page?id=1#hash
protocol	Протокол	https:
host	Хост и порт	example.com:8080
pathname	Путь	/page

Основные свойства объекта window.location

Window.location — это не только href, но и набор свойств для разбора URL на части. Каждое свойство доступно для чтения и записи (кроме origin в некоторых случаях). Изменение любого свойства, кроме hash, приводит к перезагрузке страницы. Это позволяет точно манипулировать адресом без ручного парсинга строки.

Возьмем реальный сценарий: пользователь зашел на /profile?user=john. С помощью pathname вы проверяете путь, search — параметры, hash — якорь для скролла. Такие свойства упрощают работу с динамическими ссылками в React или Vue. А host помогает убедиться, что код выполняется на правильном домене, избегая ошибок в продакшене.

hostname: Возвращает домен без порта, например ‘example.com’. Полезно для проверки поддомена.
port: Номер порта, как ‘8080’. Часто используется в dev-средах.
search: Строка запроса с ‘?’, например ‘?id=123’. Идеально для GET-параметров.
hash: Якорь с ‘#’, для навигации внутри страницы без релоада.
Важно: Изменение hash не перезагружает страницу, что критично для SPA.*

console.log(window.location.pathname); // '/profile'
console.log(window.location.search);   // '?user=john'
console.log(window.location.hash);     // '#section'

Свойство	Чтение	Запись	Влияние на историю
href	Да	Да	Добавляет запись
pathname	Да	Да	Перезагружает
search	Да	Да	Перезагружает
hash	Да	Да	Не перезагружает

Методы для навигации и обновления

Помимо свойств, window.location предлагает методы вроде assign() и reload(). Метод assign(url) похож на присвоение href — перенаправляет и добавляет в историю. Replace(url) меняет URL без записи в историю, что полезно для редиректов без ‘назад’. Reload() перезагружает страницу, с параметром true — принудительно из сервера.

Представьте авторизацию: после логина assign(‘/dashboard’) отправит на дашборд с записью в историю. А replace(‘/login’) на форме входа скроет исходный URL. Это стандарт в веб-приложениях для чистой навигации. Методы работают одинаково в фреймах, если получить contentWindow.

assign(url): Навигация с добавлением в историю. Эквивалент window.location.href = url.
replace(url): Замена текущей записи в истории, кнопка ‘Назад’ не сработает.
reload(force): Перезагрузка, force=true игнорирует кэш.

Нюанс: В фреймах используйте frame.contentWindow.location.href для целевого перенаправления.

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

Разница с window.open и другими подходами

Часто путают window.location.href с window.open(). Первое меняет текущую страницу, второе открывает новое окно или вкладку. Href добавляет в историю, open — нет, и позволяет задавать размеры. Выбирайте href для внутренней навигации, open — для внешних ссылок вроде ‘Поделиться’.

В SPA history API (pushState) заменяет href для изменения URL без релоада. Но location все равно нужен для начальной проверки. Сравните: href для простых задач, open для попапов, history.pushState для продвинутой маршрутизации.

Метод	Новое окно	История	Пример использования
location.href	Нет	Да	Внутренний редирект
open(url)	Да	Нет	Попап или вкладка
replace(url)	Нет	Нет	Скрытый редирект

Когда location.href меняет правила игры

Даже с современными фреймворками window.location.href остается базовым инструментом. Он работает везде — от vanilla JS до Angular, и не зависит от библиотек. Подумайте о сценариях вроде A/B-тестирования по URL или защиты от фрейминга через replace(). Осталось пространство для комбинаций с localStorage или сервис-воркерами.

В реальных проектах href сочетают с URLSearchParams для парсинга параметров. Это дает гибкость без внешних deps. Над чем подумать: как интегрировать с PWA для оффлайн-навигации или SSR для серверных редиректов.