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

Как работает 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’)) { /* код */ } — выполнит действие при наличии параметра.

Основные свойства объекта 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'

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

Помимо свойств, 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 меняет правила игры

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

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