Получить текущий URL-адрес с помощью JavaScript/jQuery
В этом посте мы обсудим, как получить текущий URL-адрес страницы в JavaScript и jQuery.
1. Использование JavaScript
The Location Объект в JavaScript содержит информацию о текущем URL-адресе документа. Доступ к нему можно получить с помощью Window интерфейс. Таким образом, вы можете использовать Window.location чтобы получить объект Location для текущего документа. затем href имущество location.href можно использовать для получения строки, содержащей полный URL-адрес.
The Location Объект предлагает несколько других свойств для получения протокола, хоста, домена, номера порта, имени пути и т. д. URL-адреса. Например,
Как получить url страницы js
Можно заметить, также, что изменение свойства href в объекте window.location приведет к переходу по новой указанный ссылке.
// Перейдем на страницу личного кабинета window.location.href = 'https://ru.hexlet.io/my/'; 29 июня 2022
Чтобы получить url страницы, можно воспользоваться глобальным объектом window.location . Этот объект содержит свойство href , которое содержит адрес текущей страницы.
const currentUrl = window.location.href; console.log(currentUrl); // => https://ru.hexlet.io/qna Некоторые другие свойства объекта window.location :
- href — весь URL
- protocol — протокол URL
- host — имя хоста и порт URL
- hostname — имя хоста URL
- port — номер порта
- pathname — путь в URL (та часть, которая идёт после первого слэша / )
- search — часть запроса URL (та часть, которая идёт после знака вопроса ? )
- hash — часть URL (та часть, которая идёт после знака решётки # )
Как получить ссылку на текущую страницу при помощи 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 меток на почту
- Как получить адрес страницы с которой отправлена форма
- Как самостоятельно и быстро сделать лендинг
Как получить url текущей страницы на JavaScript
Рассмотрим как получить URL текущей страницы в JS целиком, а также по отдельности — протокол, доменное имя сайта, GET параметры и значение после решётки (хеша). Полная информация об адресе содержится в объекте « document.location ». Доступ к отдельным элементам получаем через его свойства.
Разберём адрес: https://realadmin.ru/saytostroy/?page=4#top
Получение значений GET параметров
Javascript предоставляет специальный объект для работы с GET параметрами. С его помощью можно проверить существование параметра по названию и получить значение.
Для примера возьмем адрес:
https://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())
Разбор URL из строки
Кроме всех вышеприведённых примеров, можно воспользоваться объектом URL.
var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top');
Интересно, что этот объект содержит свойство «searchParams» типа «URLSearchParams», который можно использовать для извлечения GET параметров.
var addr = new URL('https://realadmin.ru/saytostroy/?page=4&limit=10&sortby=desc#top'); if (addr.searchParams.has('limit')) < let limit = addr.searchParams.get('limit'); // 10 >
27 мар 2015 г.
Ещё интересное — 6
Комментарии —
ПОКАЗАТЬ СТАРЫЕ
Вася 06 октября 2018, 06:18 # ↓
Респект и уважуха бро
Владос 21 июня 2020, 11:02 # ↓
Сап, спасибо за гайд, кратко и понятно
tm.lxrd 01 августа 2020, 14:29 # ↓
Без воды, спасибо)
Andy Si 08 сентября 2020, 12:56 # ↓
Обновил статью, добавил новый способ работы с параметрами через объект URLSearchParams. Пользуйтесь 🙂
Иван из России
Иван из России 17 августа 2021, 14:23 (был изменён) # ↓
Отключил брокировщик рекламы, покормил кота и хозяина сайта. Быть добру)
Andy Si 17 августа 2021, 14:30 # ↑ ↓
Красавчик, респект тебе)))
Andew 19 сентября 2021, 20:13 # ↓
Статья — бомба! Только не извлекём а извлечём.)
Автору спасибо!
Andy Si 20 сентября 2021, 09:18 # ↑ ↓
Спасибо, поправил 😉
Kelvin 24 апреля 2022, 22:56 # ↓
а где данные https://realadmin.ru/saytostroy/?page=4#top
которые нах. между / и ?page…?
как определить адрес конкретного файла\страницы?
Andy Si 24 апреля 2022, 23:03 # ↑ ↓
Не понял чего не хватает. Путь есть в pathname. Или что-то другое требуется?
Kelvin 26 апреля 2022, 20:51 # ↑ ↓
например: https://youtube.com/
какая страница открывается по умолчанию?
как ее вычислить?
Andy Si 26 апреля 2022, 20:57 # ↑ ↓
Так есть в статье и выше написал — document.location.pathname
Insider 09 декабря 2022, 18:25 (был изменён) # ↓
Может кому пригодится
append(name, value) – добавить параметр по имени,
delete(name) – удалить параметр по имени,
get(name) – получить параметр по имени,
getAll(name) – получить все параметры с одинаковым именем name (такое возможно, например: ?user=John&user=Pete),
has(name) – проверить наличие параметра по имени,
set(name, value) – задать/заменить параметр,
sort() – отсортировать параметры по имени, используется редко