Свойство window.location представляет текущий URL документа, отображаемый в этом окне.

Поскольку объект window находится в верхней части цепочки областей видимости, к свойствам объекта window.location можно обращаться без указания префикса window. Свойство window.location.href может быть записано как location.href.

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

Вы можете использовать свойство window.location.href, чтобы получить полный URL текущей страницы.

В следующем примере будет отображаться полный URL-адрес страницы при нажатии кнопки:

<script>
function getURL() {
    alert("The URL of this page is: " + window.location.href);
}
</script>
 
<button type="button" onclick="getURL();">Get Page URL</button>

Получение различных частей URL

Вы можете использовать другие свойства объекта местоположения, такие как protocol, hostname, port, pathname, search и т. д., чтобы получить разные части URL.

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

// Печатает полный URL
document.write(window.location.href);
  
// Печатает протокол, например http: или https:
document.write(window.location.protocol); 
 
// Печатает имя хоста с портом, например localhost или localhost: 3000
document.write(window.location.host);
  
// Печатает имя хоста, например localhost или www.example.com
document.write(window.location.hostname);
 
// Печатает номер порта, например 3000
document.write(window.location.port);
  
// Печатает путь, например /products/search.php
document.write(window.location.pathname); 
 
// Печатает строку запроса, например ?q=ipad
document.write(window.location.search);
 
// Печатает идентификатор фрагмента, например #featured
document.write(window.location.hash);

Когда вы посещаете веб-сайт, вы всегда подключаетесь к определенному порту (например, http://localhost:3000). Однако большинство браузеров просто не будут отображать номера портов по умолчанию, например 80 для HTTP и 443 для HTTPS.

Загрузка новых документов

Вы можете использовать метод assign() объекта location, то есть window.location.assign(), чтобы загрузить другой ресурс из URL-адреса, предоставленного в качестве параметра, например:

<script>
function loadHomePage() {
    window.location.assign("https://zolin.digital");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

Вы также можете использовать метод replace() для загрузки нового документа, который почти такой же, как метод assign(). Разница в том, что он не создает запись в истории браузера, а это означает, что пользователь не сможет использовать кнопку «Назад» для перехода к нему. Вот пример:

<script>
function loadHomePage(){
    window.location.replace("https://zolin.digital");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

Кроме того, вы можете использовать свойство window.location.href для загрузки нового документа в окне. Это дает тот же эффект, что и при использовании метода assign(). Вот пример:

<script>
function loadHomePage() {
    window.location.href = "https://zolin.digital";
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

Динамическая перезагрузка страницы

Метод reload() можно использовать для динамической перезагрузки текущей страницы.

При желании вы можете указать логический параметр true или false. Если параметр имеет значение true, метод заставит браузер перезагрузить страницу с сервера. Если false или он не указан, браузер может перезагрузить страницу из своего кэша. Вот пример:

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">Reload Page</button>

Результат вызова метода reload() отличается от нажатия кнопки «Обновить» в браузере. Метод reload() очищает значения элементов управления формы, которые в противном случае могли бы быть сохранены после нажатия кнопки «Обновить» в некоторых браузерах.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.