Как получить текущий URL с помощью JavaScript -JS Location

Комментарии

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

В этой статье вы узнаете, как получить текущий URL с помощью объекта Location в JavaScript. Я покажу вам несколько примеров, а также несколько лучших практик.

Как использовать объект Location

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

Для доступа к объекту Location можно использовать свойство window.location. Оно возвращает объект Location для текущей веб-страницы. Этот объект содержит множество данных, таких как URL, имя пути, происхождение, хост, данные поиска и другие.

Например:

{
  "ancestorOrigins": {
    "0": "https://codepen.io"
  },
  "href": "https://cdpn.io/cpe/boomboom/index.html?editors=0012&key=index.html-f1981af8-7dc2-f8b6-669a-8980d4a8d02a",
  "origin": "https://cdpn.io",
  "protocol": "https:",
  "host": "cdpn.io",
  "hostname": "cdpn.io",
  "port": "",
  "pathname": "/cpe/boomboom/index.html",
  "search": "?editors=0012&key=index.html-f1981af8-7dc2-f8b6-669a-8980d4a8d02a",
  "hash": ""
}

Как получить доступ к текущему URL с помощью JavaScript

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

Свойство href содержит полный URL текущей веб-страницы:

const currentUrl = window.location.href;
console.log(currentUrl);

Это приведет к записи текущего URL веб-страницы в консоль.

Как разобрать текущий URL с помощью JavaScript

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

Чтобы разобрать текущий URL, вы можете использовать различные свойства объекта Location. Например, вы можете использовать свойство protocol, чтобы получить протокол текущего URL:

const protocol = window.location.protocol;
console.log(protocol);

В результате в консоль будет выведен протокол текущего URL (например, “http:” или “https:”).

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

const host = window.location.host;
const pathname = window.location.pathname;
const search = window.location.search;
const hash = window.location.hash;

Используя эти свойства, вы можете извлекать различные части текущего URL.

Как обновить текущий URL с помощью JavaScript

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

Для обновления текущего URL можно использовать различные методы объекта Location. Например, вы можете использовать метод replace() для замены текущего URL на новый URL:

const newUrl = "https://example.com/new-page.html";
window.location.replace(newUrl);

Это заменит текущий URL на новый, перенаправляя пользователя на новую страницу.

Лучшие практики при работе с объектом Location

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

if (window.location) {
  // Access or modify the Location object
}

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

Заключение

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

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

Если вы хотите узнать больше о JavaScript и веб-разработке, просмотрите 200+ экспертных статей по веб-разработке, написанных мной, а также загляните в мой блог, где вы найдете еще больше увлекательных материалов.

Успехов в кодировании!

Поделиться:

Оглавление