Справочник · JavaScript

location: адрес текущей страницы

Редакция PraktumОбновлено 25 октября 20265 мин чтенияУровень: новичок

Объект location содержит адрес текущей страницы, разобранный на части: протокол, домен, путь, параметры и якорь. Через него можно и перейти на другую страницу: location.href = '/page/' или location.assign(), а location.replace() переходит без записи в историю. Для работы с параметрами удобнее URL и URLSearchParams.

Минимальный пример

// https://praktum.ru/javascript/location/?tab=api#examples
location.href;       // весь адрес
location.origin;     // 'https://praktum.ru'
location.pathname;   // '/javascript/location/'
location.search;     // '?tab=api'
location.hash;       // '#examples'

Каждая часть адреса доступна отдельным свойством. Чаще всего нужны pathname — чтобы подсветить пункт меню, и search — чтобы прочитать параметры.

Части адреса

Переход на другую страницу

location.href = '/catalog/';          // переход, запись в историю
location.assign('/catalog/');         // то же
location.replace('/login/');          // переход без записи: «Назад» не вернёт сюда
location.reload();                    // перезагрузить страницу

replace используют для перенаправлений: после входа на сайт, при смене языка, при устаревшем адресе — чтобы кнопка «Назад» не возвращала на промежуточную страницу. Для обычных переходов по клику лучше настоящая ссылка a href, а не JavaScript.

Параметры адреса

const params = new URLSearchParams(location.search);
const query = params.get('q') ?? '';
const page = Number(params.get('page') ?? 1);

Разбирать location.search вручную через split неудобно и легко ошибиться с кодировкой. URLSearchParams сам декодирует значения и возвращает null для отсутствующих параметров.

Изменить адрес без перезагрузки

const url = new URL(location.href);
url.searchParams.set('category', 'shoes');
history.pushState(null, '', url);      // адрес изменился, страница не перезагрузилась

window.addEventListener('popstate', () => {
  applyFilters(new URL(location.href).searchParams);   // пользователь нажал «Назад»
});

Присваивание location.search перезагружает страницу. history.pushState меняет адрес без перезагрузки — фильтры каталога сохраняются в ссылке, и её можно отправить другу. При нажатии «Назад» срабатывает popstate, и интерфейс нужно обновить по новому адресу. replaceState меняет адрес без новой записи в истории.

Подсветить текущий пункт меню

document.querySelectorAll('nav a').forEach((link) => {
  if (new URL(link.href).pathname === location.pathname) {
    link.setAttribute('aria-current', 'page');
  }
});

Сравнение pathname ссылки с текущим путём находит активный пункт. aria-current="page" сообщает скринридеру, где находится пользователь, и по нему же удобно стилизовать пункт в CSS.

Якорь и hashchange

if (location.hash === '#faq') openFaq();
window.addEventListener('hashchange', () => highlight(location.hash));

Смена hash не перезагружает страницу и прокручивает к элементу с этим id. Событие hashchange срабатывает при переходе по якорным ссылкам и кнопке «Назад».

location.href или ссылка

Частые ошибки

• Делают навигацию через onclick с location вместо ссылок.
• Разбирают параметры вручную через split.
• Меняют location.search для фильтров и перезагружают страницу.
• Используют assign для перенаправлений, ломая кнопку «Назад».
• Забывают обработать popstate после pushState.

Доступность

Переходы делай настоящими ссылками — их видят скринридеры и поисковики, их можно открыть в новой вкладке. Если меняешь содержимое страницы через pushState, обнови заголовок document.title и переведи фокус на начало нового содержимого.

Поддержка браузерами

location, URL, URLSearchParams и history.pushState поддерживаются всеми актуальными браузерами.

const select = document.querySelector('#category');

function syncFromUrl() {
  const cat = new URLSearchParams(location.search).get('category') ?? 'all';
  select.value = cat;
  applyFilter(cat);
}

select.addEventListener('change', () => {
  const url = new URL(location.href);
  url.searchParams.set('category', select.value);
  history.pushState(null, '', url);
  applyFilter(select.value);
});

window.addEventListener('popstate', syncFromUrl);
syncFromUrl();