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

Как получить url 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* работают хорошо.

Как получить 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 получить url адрес?

Из кода выше или сразу из glopart.ru/ads/adunit/1443/script.js нужно получить значение url (ссылку) которое изменяется при каждом обновлении Можно это сделать и как? Спасибо!

  • Js код изменяет размер только одного элемент сайта
  • Google: Как удалить email-адреса из поисковой выдачи
  • Как менять url без перезагрузки страницы?

На сайте с 10.05.2007
14 ноября 2016, 19:40

Что с ним в итоге сделать нужно?

 
(function(d, s, h)< 
var p = ~location.protocol.indexOf(h)?'':h+':'; 
var m = d.getElementsByTagName(s)[0]; 
var n = d.createElement('script');n.src=p+'//glopart.ru/ads/adunit/1443/script.js'; 
m.parentNode.insertBefore(n,m);d.write(' '); 
ssilka = n.src; 
>)(document, 'script', 'http'); 
alert(ssilka);

На сайте с 13.11.2012
14 ноября 2016, 19:41

Мне просто нужно получать разную ссылку при обращении к одной и той же странице, т.е. просто выдернуть ссылку, чтобы потом ее использовать в своем коде.

Выдернуть из js glopart.ru/ads/adunit/1443/script.js ‘url’ и вставить в свой html. php

На сайте с 10.05.2007
14 ноября 2016, 20:40

$url = ‘http://glopart.ru/ads/adunit/1443/script.js’;
$content = file_get_contents($url);
$curl_handle=curl_init();
curl_setopt($curl_handle, CURLOPT_URL,$url);
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_USERAGENT, ‘Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)’);
$content = curl_exec($curl_handle);
curl_close($curl_handle);
$content = str_replace(array(«\r»,»\n»),»»,$content);
preg_match(‘@@si’,$content,$content);
$cart = json_decode( $content[0], true );

echo ‘wareUrl: ‘.$cart[‘wares’][‘0’][‘wareUrl’].’
‘;
echo ‘url: ‘.$cart[‘wares’][‘0’][‘url’].’
‘;
echo ‘image: ‘.$cart[‘wares’][‘0’][‘image’];
?>
На сайте с 13.11.2012
14 ноября 2016, 20:41

Samail, большое спасибо!

На сайте с 30.09.2016
14 ноября 2016, 20:46
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
На сайте с 10.05.2007
14 ноября 2016, 20:57

Строка там одна лишняя.

Должно быть так:

$url = 'http://glopart.ru/ads/adunit/1443/script.js'; 
$curl_handle=curl_init(); 
curl_setopt($curl_handle, CURLOPT_URL,$url); 
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2); 
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)'); 
$content = curl_exec($curl_handle); 
curl_close($curl_handle); 
$content = str_replace(array("\r","\n"),"",$content); 
preg_match('@<(.*)>@si',$content,$content); 
$cart = json_decode( $content[0], true ); 

echo 'wareUrl: '.$cart['wares']['0']['wareUrl'].'
'; 
echo 'url: '.$cart['wares']['0']['url'].'
'; 
echo 'image: '.$cart['wares']['0']['image']; 
?>
$url = 'http://glopart.ru/ads/adunit/1443/script.js'; 
$content = file_get_contents($url); 
$content = str_replace(array("\r","\n"),"",$content); 
preg_match('@<(.*)>@si',$content,$content); 
$cart = json_decode( $content[0], true ); 

echo 'wareUrl: '.$cart['wares']['0']['wareUrl'].'
'; 
echo 'url: '.$cart['wares']['0']['url'].'
'; 
echo 'image: '.$cart['wares']['0']['image']; 
?>

Получение текущего URL с помощью JavaScript

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

Storing the current URL with JavaScript.

Алексей Кодов
Автор статьи
6 июля 2023 в 18:24

Одной из распространенных задач, с которыми приходится сталкиваться при работе с JavaScript в браузере, является необходимость получить текущий URL веб-страницы. Это может быть полезно для самых разных целей: от простого вывода URL на странице до его использования в условиях различных функций и методов.

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

Для этого можно использовать глобальный объект window.location в JavaScript, который представляет собой объект с информацией о текущем местоположении документа.

Объект window.location содержит множество свойств, но для получения полного URL используется свойство href . Вот как это выглядит:

var currentURL = window.location.href; console.log(currentURL);

В этом примере, window.location.href возвращает полный URL веб-страницы и присваивает его переменной currentURL . Затем этот URL выводится в консоль.

Таким образом, получение текущего URL с помощью JavaScript является достаточно простой задачей. Но стоит помнить, что объект window.location содержит не только полный URL, но и другую полезную информацию о местоположении документа, такую как домен, путь, параметры запроса и т.д., которую также можно использовать при разработке веб-приложений.

Похожие публикации:
  1. Th html что это
  2. Как обновить nextcloud на сервере
  3. Как узнать размер стека c
  4. Что делает функция int

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

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