RealAdmin

Как получить url текущей страницы на JavaScript

Как получить url текущей страницы на JavaScript
Комментарии: 4

Рассмотрим как получить URL текущей страницы в JS целиком, а также по отдельности протокол, доменное имя сайта, GET параметры и значение после решётки (хеша). Полная информация об адресе содержится в объекте «document.location». Доступ к отдельным элементам получаем через его свойства.

Разберём адрес: http://realadmin.ru/saytostroy/?page=4#top
СвойствоЗначение
document.location.hrefhttp://realadmin.ru/saytostroy/?page=4#top
document.location.protocolhttp:
document.location.hostrealadmin.ru
document.location.pathname/saytostroy/
document.location.search?page=4
document.location.hash#top

Получение значений GET параметров

Javascript предоставляет специальный объект для работы с GET параметрами. С его помощью можно проверить существование параметра по названию и получить значение.

Для примера возьмем адрес:

http://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc

Извлекём значения «page» и «sortby»:

var paramsString = document.location.search; // ?page=4&limit=10&sortby=desc  
var searchParams = new URLSearchParams(paramsString);
    
searchParams.get("page"); // 4
searchParams.get("sortby"); // desc

URLSearchParams — объект не доступен в устаревших версиях браузеров, например во всех версиях IE.

Для проверки существования параметров, воспользуйтесь методом «has».

searchParams.has("limit"); // true
searchParams.has("sortby"); // true
searchParams.has("orderby"); // false

Для перебора всех пар ключ/значение используем метод «entries».

for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

Результат:

  • page 4
  • limit 10
  • sortby desc

Разбор URL из строки

Кроме всех вышеприведённых примеров, можно воспользоваться объектом URL.

var addr = new URL('http://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');
СвойствоЗначение
addr.hrefhttp://realadmin.ru/saytostroy/?page=4#top
addr.protocolhttp:
addr.hostrealadmin.ru
addr.pathname/saytostroy/
addr.search?page=4&limit=10&sortby=desc
addr.hash#top

Интересно, что этот объект содержит свойство «searchParams» типа «URLSearchParams», который можно использовать для извлечения GET параметров.

var addr = new URL('http://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');

if (addr.searchParams.has('limit')) {
    let limit = addr.searchParams.get('limit'); // 10
}
Темы:
Ещё интересное — 6
Комментарии —
  1. Вася
    Вася06 октября 2018, 06:18#
    Респект и уважуха бро
    1. Владос
      Владос21 июня 2020, 11:02#
      Сап, спасибо за гайд, кратко и понятно
      1. tm.lxrd
        tm.lxrd01 августа 2020, 14:29#
        Без воды, спасибо)
        1. Andy Si08 сентября 2020, 12:56#
          Обновил статью, добавил новый способ работы с параметрами через объект URLSearchParams. Пользуйтесь :)
          © REALADMIN.RU   2021 г.
          Страница сгенерирована: 0,1706 s | 6 mb.
          На каком уровне Вы играете в шахматы?
          О П Р О С