Как получить адрес страницы js
Перейти к содержимому

Как получить адрес страницы js

  • автор:

Объекты URL

Встроенный класс URL предоставляет удобный интерфейс для создания и разбора URL-адресов.

Нет сетевых методов, которые требуют именно объект URL , обычные строки вполне подходят. Так что, технически, мы не обязаны использовать URL . Но иногда он может быть весьма удобным.

Создание URL

Синтаксис создания нового объекта URL :

new URL(url, [base])
  • url – полный URL-адрес или только путь, если указан второй параметр,
  • base – необязательный «базовый» URL: если указан и аргумент url содержит только путь, то адрес будет создан относительно него (пример ниже).
let url = new URL('https://javascript.info/profile/admin');

Эти два URL одинаковы:

let url1 = new URL('https://javascript.info/profile/admin'); let url2 = new URL('/profile/admin', 'https://javascript.info'); alert(url1); // https://javascript.info/profile/admin alert(url2); // https://javascript.info/profile/admin

Можно легко создать новый URL по пути относительно существующего URL-адреса:

let url = new URL('https://javascript.info/profile/admin'); let newUrl = new URL('tester', url); alert(newUrl); // https://javascript.info/profile/tester

Объект URL даёт доступ к компонентам URL, поэтому это отличный способ «разобрать» URL-адрес, например:

let url = new URL('https://javascript.info/url'); alert(url.protocol); // https: alert(url.host); // javascript.info alert(url.pathname); // /url

Вот шпаргалка по компонентам URL:

  • href это полный URL-адрес, то же самое, что url.toString()
  • protocol – протокол, заканчивается символом двоеточия :
  • search строка параметров, начинается с вопросительного знака ?
  • hash начинается с символа #
  • также есть свойства user и password , если используется HTTP-аутентификация: http://login:password@site.com (не нарисованы сверху, так как редко используются).

Можно передавать объекты URL в сетевые методы (и большинство других) вместо строк

Мы можем использовать объект URL в методах fetch или XMLHttpRequest и почти во всех других, где ожидается URL-строка.

Вообще, объект URL можно передавать почти куда угодно вместо строки, так как большинство методов сконвертируют объект в строку, при этом он станет строкой с полным URL-адресом.

SearchParams «?…»

Допустим, мы хотим создать URL-адрес с заданными параметрами, например, https://google.com/search?query=JavaScript .

Мы можем указать их в строке:

new URL('https://google.com/search?query=JavaScript')

…Но параметры должны быть правильно закодированы, чтобы они могли содержать не-латинские буквы, пробелы и т.п. (об этом подробнее далее).

Так что для этого есть свойство url.searchParams – объект типа URLSearchParams.

Он предоставляет удобные методы для работы с параметрами:

  • append(name, value) – добавить параметр по имени,
  • delete(name) – удалить параметр по имени,
  • get(name) – получить параметр по имени,
  • getAll(name) – получить все параметры с одинаковым именем name (такое возможно, например: ?user=John&user=Pete ),
  • has(name) – проверить наличие параметра по имени,
  • set(name, value) – задать/заменить параметр,
  • sort() – отсортировать параметры по имени, используется редко,
  • …и является перебираемым, аналогично Map .

Пример добавления параметров, содержащих пробелы и знаки препинания:

let url = new URL('https://google.com/search'); url.searchParams.set('q', 'test me!'); // добавим параметр, содержащий пробел и ! alert(url); // https://google.com/search?q=test+me%21 url.searchParams.set('tbs', 'qdr:y'); // параметр с двоеточием : // параметры автоматически кодируются alert(url); // https://google.com/search?query=test+me%21&tbs=qdr%3Ay // перебрать параметры (в исходном виде) for(let [name, value] of url.searchParams) < alert(`$=$`); // q=test me!, далее tbs=qdr:y >

Кодирование

Существует стандарт RFC3986, который определяет список разрешённых и запрещённых символов в URL.

Запрещённые символы, например, нелатинские буквы и пробелы, должны быть закодированы – заменены соответствующими кодами UTF-8 с префиксом % , например: %20 (исторически сложилось так, что пробел в URL-адресе можно также кодировать символом + , но это исключение).

К счастью, объекты URL делают всё это автоматически. Мы просто указываем параметры в обычном, незакодированном, виде, а затем конвертируем URL в строку:

let url = new URL('https://ru.wikipedia.org/wiki/Тест'); url.searchParams.set('key', 'ъ'); alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A

Как видно, слово Тест в пути URL-адреса и буква ъ в параметре закодированы.

URL стал длиннее, так как каждая кириллическая буква представляется двумя байтами в кодировке UTF-8.

Кодирование в строках

Раньше, до того как появились объекты URL , люди использовали для URL-адресов обычные строки.

Сейчас URL часто удобнее, но строки всё ещё можно использовать. Во многих случаях код с ними короче.

Однако, если мы используем строку, то надо самим позаботиться о кодировании специальных символов.

Для этого есть встроенные функции:

  • encodeURI – кодирует URL-адрес целиком.
  • decodeURI – декодирует URL-адрес целиком.
  • encodeURIComponent – кодирует компонент URL, например, параметр, хеш, имя пути и т.п.
  • decodeURIComponent – декодирует компонент URL.

Возникает естественный вопрос: «Какая разница между encodeURIComponent и encodeURI ? Когда использовать одну и другую функцию?»

Это легко понять, если мы посмотрим на URL-адрес, разбитый на компоненты на рисунке выше:

http://site.com:8080/path/page?p1=v1&p2=v2#hash

Как мы видим, в URL-адресе разрешены символы : , ? , = , & , # .

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

  • encodeURI кодирует только символы, полностью запрещённые в URL.
  • encodeURIComponent кодирует эти же символы плюс, в дополнение к ним, символы # , $ , & , + , , , / , : , ; , = , ? и @ .

Так что для URL целиком можно использовать encodeURI :

let url = encodeURI('http://site.com/привет'); alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82

…А для параметров лучше будет взять encodeURIComponent :

let music = encodeURIComponent('Rock&Roll'); let url = `https://google.com/search?q=$`; alert(url); // https://google.com/search?q=Rock%26Roll

Сравните с encodeURI :

let music = encodeURI('Rock&Roll'); let url = `https://google.com/search?q=$`; alert(url); // https://google.com/search?q=Rock&Roll

Как видим, функция encodeURI не закодировала символ & , который является разрешённым в составе полного URL-адреса.

Но внутри параметра поиска символ & должен быть закодирован, в противном случае мы получим q=Rock&Roll , что значит q=Rock плюс непонятный параметр Roll . Не то, что предполагалось.

Чтобы правильно вставить параметр поиска в строку URL, мы должны использовать для него только encodeURIComponent . Наиболее безопасно кодировать и имя, и значение, за исключением случаев, когда мы абсолютно уверены в том, что они содержат только разрешённые символы.

Разница в кодировании с URL

Классы URL и URLSearchParams базируются на последней спецификации URI, описывающей устройство адресов: RFC3986, в то время как функции encode* – на устаревшей версии стандарта RFC2396.

Различий мало, но они есть, например, по-разному кодируются адреса IPv6:

// допустимый URL-адрес IPv6 let url = 'http://[2607:f8b0:4005:802::1007]/'; alert(encodeURI(url)); // http://%5B2607:f8b0:4005:802::1007%5D/ alert(new URL(url)); // http://[2607:f8b0:4005:802::1007]/

Как мы видим, функция encodeURI заменила квадратные скобки [. ] , сделав адрес некорректным. Причина: URL-адреса IPv6 не существовали в момент создания стандарта RFC2396 (август 1998).

Тем не менее, такие случаи редки. По большей части функции encode* работают хорошо.

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

Как узнать, какой адрес сейчас открыт на вкладке браузера при помощи JavaSсript? Как определить какому URL-адресу принадлежит открытая HTML-страница? Как в консоли увидеть результат URL-адреса, который просматривает пользователь?

Ответы на эти вопросы можно найти ниже.

Способ № 1 — Через объект document и его атрибуты URL и documentURI

В стандарте объектной модели документа DOM есть интерфейс Document , который имеет свои атрибуты. В нашем случае для определения URL-адреса текущей открытой страницы браузера поможет атрибут URL и атрибут documentURI .

Для примера обратимся к странице по адресу:

'https://getbootstrap.com/docs/5.2/getting-started/introduction/'

Обратимся к объекту document и его атрибутам:

document.URL
document.documentURI

Обе команды возвращают нам URL текущей страницы:

Получили URL текущей страницы через объект document в браузере - JavaScript 2022

Способ № 2 — Через объект location и его атрибут href

Объект location можно вызывать самостоятельно в консоли браузера (то есть обращаться напрямую). Для этого нужно обратиться к его атрибуту href , который вернёт полный адрес ресурса:

location.href 'https://getbootstrap.com/docs/5.2/getting-started/introduction/'

location.href в консоли браузера сайта bootstrap - JavaScript 2022

Объект location доступен через объекты window и document .

window.location document.location

Объект location доступен через window и document - JavaScript 2022

Получение URL текущей страницы через вложенные href :

window.location.href document.location.href

Как получить ссылку на текущую страницу при помощи JS и PHP

Привет, друзья. Сегодня поговорим о том, как в JS и PHP получить адрес текущей страницы. Дело в том, что разработчику часто нужно выполнить какой-то код, только на определенных страницах или в зависимости от каких-то GET параметров. Как раз в таких случаях удобно сохранить все данные из адресной строки в объект или строку, чтобы иметь возможность удобно манипулировать своим кодом/разметкой в зависимость от полученных параметров.

Обычно я сталкиваюсь с такими задачами:

  • Получение utm-меток, в зависимости от которых мы можем менять контент на странице.
  • Определение адреса страниц, на которых стоит подключить какой-то скрипт.
  • Получение адреса страницы для передачи ссылки в форму обратной связи, чтобы понимать с какой страницы совершён заказ ( в том числе и передача utm-меток в форму).

Как получить ссылку на текущую страницу в Javascript

Для начала давайте разберемся как справиться с задачей при помощи js. В javascript есть объект Location, который позволяет получить текущий URL страницы. Доступ к нему я обычно произвожу через глобальный объект Window или Document. В итоге Window.location возвращает нам объект со свойствами, в которых и содержится интересующая нас информация. Например, самыми популярными для меня свойствами являются: href, hostname, pathname и search.

Для пример возьмем url:

window.location.href

console.log(window.location.href); // вернёт: https://smartlanding.biz/smartroulette-lp/index.php?utm_source=yandex

Команда возвращает полный адрес страницы, то есть ссылку со всеми параметрами.

window.location.hostname

console.log(window.location.hostname); //вернет smartlanding.biz

Команда возвращает домен текущей страницы.

window.location.pathname

console.log(window.location.pathname); //вернет /smartroulette-lp/index.php

Вернет путь до текущей страницы, исключая домен и параметры. То есть покажет категорию/рубрику/папку, в которой находится страница.

window.location.search

console.log(window.location.search); // Вернет ?utm_source=yandex

Возвращает GET-параметр начиная со знака «?», то есть позволяет получить любые параметры, которые вы передаёте вместе со ссылкой. В том числе и пресловутые UTM-метки.

Как видите, в js есть все, чтобы легко справиться с задачей получения ссылки на текущую страницу. Но это не все возможности, которые дает нам javascript. Также можно получить протокол, порт, домен с портом и хеш из адресной строки. Делается это при помощи следующих свойств: protocol, port, host и hash.

console.log(window.location.protocol); // вернет https: console.log(window.location.port); // вернет номер порта, если он присутствует в адресной строке console.log(window.location.host); // вернёт домен и порт, если он есть console.log(window.location.hash); // вернет хеш страницы, начиная с символа #, например, #testmarker

Как получить ссылку на текущую страницу в PHP

Теперь давайте посмотрим на PHP. На самом деле тут тоже дела обстоят подобным образом. Есть готовый массив $_SERVER , который содержит в том числе и путь к текущей странице.

Как и в прошлый раз покажу на примере адреса:

Полный адрес текущей страницы на PHP

$currentUrl= ((!empty($_SERVER['HTTPS'])) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; echo $currentUrl; // Выведет https://smartlanding.biz/smartroulette-lp/index.php?utm_source=yandex

Путь к текущей странице без параметров

$currentUrl = ((!empty($_SERVER['HTTPS'])) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; $currentUrl = explode('?', $currentUrl); $currentUrl = $currentUrl[0]; echo $currentUrl; // Выведет https://smartlanding.biz/smartroulette-lp/index.php

Путь без домена и параметров

$currentUrl = $_SERVER['REQUEST_URI']; $currentUrl = explode('?', $url); $currentUrl = $Url[0]; echo $currentUrl; // Вернет /smartroulette-lp/index.php

Получить только GET-параметры текущей страницы

$currentUrl = $_SERVER['QUERY_STRING']; echo $currentUrl; // Выведет utm_source=yandex

Если остались какие-то вопросы — задавайте в комментариях. Попробуем решить.

05/10/2022 Дмитрий Давыдов

Похожие публикации

  • Реферальные хвосты. Как отправить данные из utm меток на почту
  • Как получить адрес страницы с которой отправлена форма
  • Как самостоятельно и быстро сделать лендинг

Location – URL текущей страницы

Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения и записи.

Доступ к Location обычно осуществляется через объекты Document.location или Window.location . Если скрипт запускается из iframe (в одном домене), доступ к родительскому окну доступен через window.parent.location .

Рассмотрим какие будут значения при следующим URL:

Location.href

Вернет полный URL страницы.

console.log(window.location.href);
Результат:
http://www.example.com/pages/contats?page=1&sort=2#marker

Объекту location можно присвоить новый URL, браузер сразу перейдет на новую страницу.

window.location.href = 'https//snipp.ru';

Так же для редиректа можно использовать методы location.assign() и location.replace() . Отличие последнего в том, что пользователь не сможет использовать кнопку «назад».

window.location.assign('https//snipp.ru');
window.location.replace('https//snipp.ru');

Location.protocol

Возвращает используемый протокол, включая : .

console.log(window.location.protocol);
Результат:
http:

Location.port

Номер порта, если его нет в URL, то ни чего не выведется.

console.log(window.location.port);

Location.host

Содержит домен и порт (если есть).

console.log(window.location.host);
Результат:
www.example.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *