5 методов JavaScript для получения текущего URL веб-страницы

Для кого эта статья:

• веб-разработчики, желающие улучшить свои навыки в JavaScript
• студенты курсов по веб-разработке, ищущие практические примеры

• профессионалы, работающие с одностраничными приложениями и SEO-оптимизацией

  Код, которому нужен текущий URL страницы – это как водитель без навигатора в незнакомом городе. Вы можете ехать, но понятия не имеете, где находитесь! Между тем, умение получить и обработать URL становится критически важным навыком для создания динамических веб-приложений. Правильная работа с адресной строкой позволяет реализовать условную логику, настроить аналитику и персонализировать пользовательский опыт. Разберём 5 профессиональных методов, которые помогут вашему коду точно знать, на какой странице он выполняется. 🧭

Для тех, кто хочет углубить понимание работы с URL и другими аспектами веб-разработки, Обучение веб-разработке от Skypro даёт необходимую базу и практические навыки. Программа включает продвинутые техники JavaScript, позволяющие создавать сложные пользовательские интерфейсы с динамической навигацией. Выпускники программы создают веб-приложения любой сложности, эффективно манипулируя данными и URL-параметрами.

Что такое URL и зачем его получать в JavaScript

URL (Uniform Resource Locator) – это адрес ресурса в интернете. По сути, это строка, которая указывает, где находится веб-страница, изображение или другой ресурс. Каждый URL имеет определённую структуру, позволяющую браузеру точно определить, что и откуда загружать.

Типичный URL выглядит так:

https://example.com:443/path/page.html?param=value#section

Где:

• https:// – протокол
• example.com – доменное имя
• :443 – порт (опционально)
• /path/page.html – путь к ресурсу
• ?param=value – параметры запроса
• #section – якорь или фрагмент

Алексей Петров, Lead Frontend Developer Однажды мы разрабатывали многоязычный сайт с динамической сменой контента. Пользователи жаловались, что при копировании URL и отправке его друзьям открывалась страница с неправильным языком. Проблема заключалась в том, что мы не учитывали URL при инициализации приложения. Мы использовали базовый JavaScript для получения URL и парсинга языкового параметра:

JS

Скопировать код

const url = window.location.href;
const langParam = new URLSearchParams(window.location.search).get('lang');

После внедрения этого простого решения система начала корректно определять предпочтительный язык из URL, что повысило конверсию на 23% за первый месяц. Никогда не недооценивайте силу правильной работы с URL-адресами!

Зачем же получать URL в JavaScript? Вот несколько ключевых причин:

Теперь, когда мы понимаем важность URL, давайте разберёмся с методами его получения в JavaScript. 🔍

Метод window.location.href и его особенности

Самый популярный и прямолинейный способ получить текущий URL страницы — использовать свойство window.location.href. Этот метод возвращает полный URL-адрес текущей страницы в виде строки.

const currentUrl = window.location.href;
console.log(currentUrl); // https://example.com/path/page.html?param=value#section

Преимущества window.location.href:

• Простота использования — один вызов свойства
• Полная строка URL со всеми компонентами
• Широкая поддержка браузерами (работает даже в старых версиях)
• Возможность не только получать, но и устанавливать значение для перенаправления

Особенности и нюансы этого метода важно учитывать при разработке:

Для практического применения, вот пример функции, которая проверяет, находится ли пользователь на определённой странице:

function isOnPageType(pageType) {
const currentUrl = window.location.href;
return currentUrl.includes(`/${pageType}/`);
}

// Использование
if (isOnPageType('products')) {
// Загрузить специфичную для страницы продуктов функциональность
loadProductSpecificFeatures();
}

Этот метод настолько фундаментален, что стал стандартом де-факто для большинства задач, связанных с получением URL. Однако иногда требуется более гранулярный контроль над отдельными частями URL — здесь на помощь приходят альтернативные свойства объекта window.location. 🔗

Альтернативные свойства объекта window.location

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

Представим, что текущий URL: https://example.com:443/path/page.html?param=value#section

// Протокол с двоеточием и слешами
console.log(window.location.protocol); // "https:"

// Имя хоста (домен)
console.log(window.location.hostname); // "example.com"

// Порт
console.log(window.location.port); // "443"

// Хост (домен + порт, если указан)
console.log(window.location.host); // "example.com:443"

// Путь
console.log(window.location.pathname); // "/path/page.html"

// Строка запроса с начальным знаком вопроса
console.log(window.location.search); // "?param=value"

// Хеш (якорь) с начальным символом #
console.log(window.location.hash); // "#section"

// Происхождение (протокол + домен + порт)
console.log(window.location.origin); // "https://example.com:443"

Эти свойства позволяют работать с конкретными частями URL без необходимости парсить полный адрес. Вот основные сценарии применения:

• window.location.pathname: идеально для роутинга в SPA-приложениях
• window.location.search: используется для получения параметров запроса
• window.location.hash: помогает управлять якорями и навигацией внутри страницы
• window.location.origin: удобно для формирования абсолютных URL при обращении к API

Марина Соколова, Frontend Architect В одном из проектов для крупного e-commerce мы столкнулись с проблемой: при переходе между категориями товаров фильтры сбрасывались, что раздражало пользователей. Нам нужно было сохранять состояние фильтров между переходами.

Решение пришло через грамотное использование URL-параметров. Мы реализовали систему, которая отслеживала состояние фильтров и обновляла URL через History API:

JS

Скопировать код

function updateFiltersInUrl(filters) {
const url = new URL(window.location);

// Очищаем существующие параметры фильтров
for(const key of url.searchParams.keys()) {
if(key.startsWith('filter_')) {
url.searchParams.delete(key);
}
}

// Добавляем новые параметры
Object.entries(filters).forEach(([key, value]) => {
if (value) {
url.searchParams.set(`filter_${key}`, value);
}
});

// Обновляем URL без перезагрузки страницы
history.pushState({}, '', url);
}

После внедрения этого подхода показатели конверсии выросли на 18%, а время, проведённое пользователями на сайте, увеличилось в среднем на 3 минуты. Это наглядно показало, насколько важно грамотно работать с URL для создания бесшовного пользовательского опыта.

Давайте рассмотрим пример создания "умной" навигации, которая выделяет текущий раздел сайта:

function highlightCurrentSection() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('nav a');

navLinks.forEach(link => {
// Получаем путь из href ссылки
const linkPath = new URL(link.href).pathname;

// Проверяем, соответствует ли текущий путь пути ссылки
if (currentPath === linkPath) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}

// Вызываем функцию при загрузке страницы
document.addEventListener('DOMContentLoaded', highlightCurrentSection);

Использование конкретных свойств window.location делает код более читаемым и целенаправленным. Вместо сложных операций парсинга строки URL вы работаете непосредственно с нужной вам частью адреса. 📍

Получение URL через document.URL и history API

Помимо window.location существуют и другие методы получения URL в JavaScript. Два наиболее заметных альтернативных подхода — это использование document.URL и взаимодействие с History API.

Рассмотрим document.URL — это свойство возвращает полный URL текущего документа:

const currentUrl = document.URL;
console.log(currentUrl); // https://example.com/path/page.html?param=value#section

На первый взгляд, document.URL кажется идентичным window.location.href, однако есть важные различия:

• document.URL — это свойство только для чтения, в отличие от window.location.href
• Оно не предоставляет методов для навигации или изменения адреса
• В очень редких случаях может содержать более актуальную информацию о URL

History API предоставляет доступ к истории браузера и, что особенно важно для нас, к текущему URL через объект window.location. Однако его истинная сила заключается в возможности изменять URL без перезагрузки страницы:

// Получение текущего состояния (включая URL)
const currentState = history.state;

// Добавление нового URL в историю без перезагрузки страницы
history.pushState({page: 2}, "Title", "/new-url");

// После этой операции window.location.href уже будет отражать новый URL
console.log(window.location.href); // https://example.com/new-url

Сравнение методов получения URL:

Вот пример практического использования History API для создания SPA-навигации:

function navigateTo(url, updateHistory = true) {
// Загрузить контент для URL (например, через AJAX)
loadContent(url).then(content => {
// Обновить содержимое страницы
document.getElementById('app').innerHTML = content;

// Обновить URL в адресной строке без перезагрузки
if (updateHistory) {
history.pushState({ path: url }, '', url);
}
});
}

// Обработка нажатия на кнопку "назад" в браузере
window.addEventListener('popstate', (event) => {
// Получаем URL из текущего состояния history
const currentUrl = window.location.pathname;
// Загружаем содержимое для этого URL без обновления истории
navigateTo(currentUrl, false);
});

// Обработка клика по ссылкам
document.addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
event.preventDefault();
navigateTo(event.target.getAttribute('href'));
}
});

Этот подход позволяет создавать плавную навигацию в одностраничных приложениях, при этом сохраняя возможность использования стандартных браузерных функций, таких как кнопки "назад" и "вперёд". 🧩

Парсинг и манипуляция URL-параметрами в JavaScript

Получить URL — это только половина дела. Часто требуется извлечь из него параметры запроса, которые следуют после знака вопроса, или манипулировать частями URL. JavaScript предлагает несколько мощных инструментов для этой задачи.

Самый современный и удобный способ — использовать интерфейс URLSearchParams:

// Допустим, URL: https://example.com/search?query=javascript&limit=10

// Получаем строку параметров
const queryString = window.location.search; // "?query=javascript&limit=10"

// Создаем объект URLSearchParams
const urlParams = new URLSearchParams(queryString);

// Получаем отдельные параметры
const query = urlParams.get('query'); // "javascript"
const limit = urlParams.get('limit'); // "10"

// Проверяем наличие параметра
const hasCategory = urlParams.has('category'); // false

// Получаем все значения для параметра (если их несколько)
const tags = urlParams.getAll('tag'); // Вернет массив значений

// Перебираем все параметры
for (const [key, value] of urlParams) {
console.log(`${key}: ${value}`);
}

Для более сложных операций с URL существует интерфейс URL:

// Создаем URL-объект из строки
const url = new URL('https://example.com/search?query=javascript&limit=10');

// Получаем и изменяем отдельные компоненты
console.log(url.hostname); // "example.com"
url.pathname = '/api/search';

// Работаем с параметрами через searchParams (это объект URLSearchParams)
url.searchParams.append('page', '1');
url.searchParams.set('limit', '20');
url.searchParams.delete('query');

// Получаем обновленный URL в виде строки
console.log(url.href); // "https://example.com/api/search?limit=20&page=1"

Для обратной совместимости со старыми браузерами иногда приходится использовать ручной парсинг:

function getQueryParam(param) {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
return urlParams.get(param);
}

// Или старый вариант, если URLSearchParams не поддерживается
function getQueryParamLegacy(param) {
const searchParams = window.location.search.substring(1).split('&');
for (let i = 0; i < searchParams.length; i++) {
const pair = searchParams[i].split('=');
if (pair[0] === param) {
return decodeURIComponent(pair[1] || '');
}
}
return null;
}

Практические сценарии использования парсинга URL-параметров:

• Персонализация контента на основе UTM-меток в маркетинговых кампаниях
• Фильтрация и сортировка данных без перезагрузки страницы
• Запоминание состояния пользовательского интерфейса между сессиями
• Реализация функций шеринга со специфическими параметрами
• Многоязычные сайты с указанием языка в URL

Вот пример функции для построения URL с обновленными параметрами:

function buildUrlWithParams(baseUrl, params) {
const url = new URL(baseUrl);

// Очищаем существующие параметры, если нужно
// url.search = '';

// Добавляем новые параметры
Object.entries(params).forEach(([key, value]) => {
if (value !== null && value !== undefined) {
url.searchParams.set(key, value);
}
});

return url.toString();
}

// Пример использования
const newUrl = buildUrlWithParams(
'https://example.com/products', 
{ 
category: 'electronics',
sort: 'price-asc',
page: 2
}
);
// Результат: https://example.com/products?category=electronics&sort=price-asc&page=2

Манипуляция URL-параметрами — это мощный инструмент для создания удобных и интуитивно понятных веб-интерфейсов. При правильном использовании он позволяет реализовать сложную логику навигации и фильтрации без необходимости хранить состояние на сервере. 🛠️

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