Как получить url текущей страницы на JavaScript
Рассмотрим как получить URL текущей страницы в JS целиком, а также по отдельности протокол, доменное имя сайта, GET параметры и значение после решётки (хеша). Полная информация об адресе содержится в объекте « document.location ». Доступ к отдельным элементам получаем через его свойства.
| Свойство | Значение |
|---|---|
| document.location.href | http://realadmin.ru/saytostroy/?page=4#top |
| document.location.protocol | http: |
| document.location.host | realadmin.ru |
| document.location.pathname | /saytostroy/ |
| document.location.search | ?page=4 |
| document.location.hash | #top |
Получение значений GET параметров
Javascript предоставляет специальный объект для работы с GET параметрами. С его помощью можно проверить существование параметра по названию и получить значение.
Для примера возьмем адрес:
Извлекём значения «page» и «sortby»:
URLSearchParams — объект не доступен в устаревших версиях браузеров, например во всех версиях IE.
Для проверки существования параметров, воспользуйтесь методом «has».
Для перебора всех пар ключ/значение используем метод «entries».
Разбор URL из строки
Кроме всех вышеприведённых примеров, можно воспользоваться объектом URL.
| Свойство | Значение |
|---|---|
| addr.href | http://realadmin.ru/saytostroy/?page=4#top |
| addr.protocol | http: |
| addr.host | realadmin.ru |
| addr.pathname | /saytostroy/ |
| addr.search | ?page=4&limit=10&sortby=desc |
| addr.hash | #top |
Интересно, что этот объект содержит свойство «searchParams» типа «URLSearchParams», который можно использовать для извлечения GET параметров.
Получить текущий URL с JavaScript?
все, что я хочу, это получить URL-адрес веб-сайта. Не URL, взятый из ссылки. При загрузке страницы мне нужно иметь возможность захватить полный, текущий URL-адрес веб-сайта и установить его в качестве переменной, чтобы делать, как мне нравится.
19 ответов
Как отмечено в комментариях, строка ниже работает, но она прослушивается для Firefox.
URL Info Access
JavaScript предоставляет вам множество методов для извлечения и изменения текущего URL-адреса, который отображается в адресной строке браузера. Все эти методы используют Location объект, который является свойством Window «объект». Вы можете создать новый Location объект, который имеет текущий URL следующим образом:
базовая структура URL
протокол: Задает имя протокола для доступа к ресурсу в Интернете. (HTTP (без SSL) или HTTPS (с SSL))
порт: номер порта, используемый для распознавания определенного процесса, на который должно быть отправлено Интернет или другое сетевое сообщение прибывает на сервер.
запрос: строка запроса следует за компонентом path и предоставляет строку информации, которую ресурс может использовать для какой-либо цели (например, в качестве параметров для поиска или в качестве данных для обработки).
hash: Якорная часть URL-адреса включает знак хэша (#).
С этим Location свойства объекта вы можете получить доступ ко всем этим компонентам URL и что они могут установить или вернуть:
надеюсь, вы получили ответ..
тот же вопрос был задан менее 24 часов назад. Процитирую себя:
Как разобрать URL в JavaScript?
Доброго времени суток, друзья!
Представляю Вашему вниманию перевод заметки «How to Parse URL in JavaScript: hostname, pathname, query, hash» автора Dmitri Pavlutin.
Унифицированный указатель ресурса или, сокращенно, URL — это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения — протокол (http, ftp, mailto).
Например, вот URL данной статьи:
Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname, dmitripavlutin.com ) или путь (pathname, /parse-url-javascript ).
В этой статье мы поговорим о структуре и основных компонентах URL.
1. Структура URL
Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:
2. Конструктор URL()
Конструктор URL() — это функция, позволяющая разбирать (парсить) компоненты URL:
Например, инициализируем URL() с абсолютным URL:
Теперь скомбинируем относительный и абсолютный URL:
Свойство href экземпляра URL() возвращает переданную URL-строку.
Здесь тип USVString означает, что JavaScript должен возвращать строку.
3. Строка запроса (query string)
Если строка запроса отсутствует, url.search возвращает пустую строку (»):
3.1. Разбор (парсинг) строки запроса
Вместо получения исходной строки запроса, мы можем получать ее параметры.
Объект URLSearchParams предоставляет множество методов для работы с параметрами строки запроса ( get(param), has(param) и т.д.).
Давайте рассмотрим пример:
url.searchParams.get(‘message’) возвращает значение параметра message строки запроса.
4. Название хоста (hostname)
Значением свойства url.hostname является название хоста URL:
5. Путь (pathname)
Свойство url.pathname содержит путь URL:
Если URL не имеет пути, url.pathname возвращает символ / :
6. Хеш (hash)
Наконец, хеш может быть получен через свойство url.hash :
Если хеш отсутствует, url.hash возвращает пустую строку (»):
7. Проверка (валидация) URL
Например, http ://example.com не валидный URL, поскольку после http имеется пробел.
Попробуем использовать этот URL:
8. Работа с URL
Такие свойства, как search, hostname, pathname, hash доступны для записи.
Например, давайте изменим название хоста существующего URL с red.com на blue.io :
Свойства origin, searchParams доступны только для чтения.
9. Заключение
Конструктор URL() является очень удобным способом разбора (парсинга) и проверки (валидации) URL в JavaScript.
new URL(relativeOrAbsolute, [, absoluteBase] в качестве первого параметра принимает абсолютный или относительный URL. Если первый параметр является относительным URL, вторым параметром должен быть абсолютный URL — основа для первого аргумента.
Объекты URL
Встроенный класс URL предоставляет удобный интерфейс для создания и разбора URL-адресов.
Создание URL
Синтаксис создания нового объекта URL :
Эти два URL одинаковы:
Можно легко создать новый URL по пути относительно существующего URL-адреса:
Объект URL даёт доступ к компонентам URL, поэтому это отличный способ «разобрать» URL-адрес, например:
Вот шпаргалка по компонентам URL:
Мы можем использовать объект URL в методах fetch или XMLHttpRequest и почти во всех других, где ожидается URL-строка.
Вообще, объект URL можно передавать почти куда угодно вместо строки, так как большинство методов сконвертируют объект в строку, при этом он станет строкой с полным URL-адресом.
SearchParams «?…»
Мы можем указать их в строке:
…Но параметры должны быть правильно закодированы, чтобы они могли содержать не-латинские буквы, пробелы и т.п. (об этом подробнее далее).
Так что для этого есть свойство url.searchParams – объект типа URLSearchParams.
Он предоставляет удобные методы для работы с параметрами:
Пример добавления параметров, содержащих пробелы и знаки препинания:
Кодирование
Существует стандарт RFC3986, который определяет список разрешённых и запрещённых символов в URL.
К счастью, объекты URL делают всё это автоматически. Мы просто указываем параметры в обычном, незакодированном, виде, а затем конвертируем URL в строку:
Как видно, слово Тест в пути URL-адреса и буква ъ в параметре закодированы.
URL стал длиннее, так как каждая кириллическая буква представляется двумя байтами в кодировке UTF-8.
Кодирование в строках
Сейчас URL часто удобнее, но строки всё ещё можно использовать. Во многих случаях код с ними короче.
Однако, если мы используем строку, то надо самим позаботиться о кодировании специальных символов.
Для этого есть встроенные функции:
Это легко понять, если мы посмотрим на URL-адрес, разбитый на компоненты на рисунке выше:
…С другой стороны, если взглянуть на один компонент, например, URL-параметр, то в нём такие символы должны быть закодированы, чтобы не поломать форматирование.
Так что для URL целиком можно использовать encodeURI :
URL.js или дружим JavaScript с обработкой ссылок
Доброго времени суток, уважаемые хабравчане!
Возникла передо мной сегодня задача генерации GET-параметров и всего URL в целом, на стороне клиента, прям вот щас, без возможности «поговорить» с сервером. Сразу оговорюсь, про этот пост я узнал вот прям перед написанием данной статьи ибо сначала закончил писать, а потом уже прибег к поиску, да и пост тот — не со всем про то же самое, что у меня.
Задача и проблемы
Писал я на чистейшем JavaScript, причем без использования prototype.__defineGetter__ или prototype.__defineSetter__ в угоду кроссбраузерности ибо IE Код конструктора
Подробнее
Парсинг
Работать, ясное дело, будет на всех языках, понимающих RegExp. Пользуйтесь, не стесняйтесь.
Тут ничего ничего сложного: разбиение по указанному выше regExp и сохранение данных в хеш this.data
Разве что, я упоминал ранее — необходима удобная работа с GET-параметрами урла, а посему разбиваем query при помощи split ( split() в данном случае «дешевле» чем regExp ) и сохраняем это в тот же пресловутый хэш. Стоит отметить использование decodeURIComponent, ведь GET-параметры могут быть urlencoded.
Вариант 1. «По красоте»
Getters/Setters
Для удобной работы с чтением/изменением параметров я решил выбрать JS way геттеры и сеттеры. T.e. метод по названию свойства и если метод вызывается с указанием параметра — это setter, если без параметра — это getter.
Объявлять я их буду через URL.prototype = < >дабы не плодить в памяти избыточные экземпляры метода.
В пример приведу один метод, в силу того что они похожи:
Отдельно остановимся на геттер/сеттере для свойства params
Собираем URL обратно
Стоит отметить, что при сборке GET-параметров, значения параметров преобразуются в escape-последовательность.
Во-первых: это правильно.
Во-вторых: если мы GET-параметром передаем данные вводимые пользователем, то вставленный юзером амперсанд разрушит последовательность ключ-значение и все покатится в тартарары.
Ну и чтобы было удобно — метод для перехода по сгенерированной ссылке:
Как видно: если не указана схема, но указан хост — автоматически подставляется схема http как самая распространенная.
Далее происходит обновление ссылки и переход по оной.
Расширяем объект String
По идее, на этом можно было бы закончить. Но, мне показалось что было бы удобно работать прямо со строковыми переменными без явного создания экземпляра объекта (как бы странно это не звучало, но, в JS нет классов, как таковых).
Как обычно приведу пример одного метода:
Вариант 2. «По Фен-Шуй»
Если предыдущий вариант, скажем так, был «красив»в использовании, то данный вариант, будет лаконичен. как с точки зрения кода, так и с точки зрения использования.
Getters/Setters
Так вот, getter/setter в данном случае будет один на всё, ну то есть совсем.
Расширяем объект String
Подведение итогов
Итак, на выходе мы имеем либу, дающую нам возможность адекватно работать с URL, причем не просто парсить, но и менять отдельные участи URL. Это уже не говоря о весьма удобном, на мой взгляд, инструменте для работы с GET-параметрами.
Плюсы и минусы подходов
Вариант 1
Вариант 2
А за сим — откланяюсь, искренне надеюсь что мой пост принесет кому-то пользу.
Всем хорошего кода, больше сна и чтобы IE не портил жизнь.
