JavaScript: Window Location

Объект Window.location предоставляет информацию о текущем адресе страницы (URL), позволяет реализовать обновление (перезагрузку) страницы, перенаправление браузера на другой URL и многое другое.

Объект Window.location содержит следующие свойства и методы.

  1. window.location.href;
  2. window.location.protocol;
  3. window.location.hostname;
  4. window.location.port;
  5. window.location.pathname;
  6. window.location.search;
  7. window.location.hash;
  8. window.location.assign();
  9. window.location.reload();
  10. window.location.replace();
  11. window.location.toString();
  12. пример.

https://only-to-top.ru/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash

Свойства:

window.location.href      'https://only-to-top.loc/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash'
               .origin    'https://only-to-top.ru'
               .protocol  'https:'
               .hostname  'only-to-top.ru'
               .port      ''
               .pathname  '/blog/coding/2019-11-30-javascript-window-location.html'
               .search    '?name=value'
               .hash      '#hash'

Методы:

window.location.assign('another-url')
               .replace('another-url')
               .reload(true)
               .toString()

Window Location Href

Данный метод вернёт href (URL) текущей страницы (полный путь). Можно использовать без префикса href, просто location.

Пример.

alert(`Текущая страница располагается по адресу: ${window.location}`)

Window Location Hostname

Свойство window.location.hostname возвращает имя хоста текущей страницы (без порта).

Пример.

alert(`Хост: ${window.location.hostname}`)

Window Location Pathname

Свойство window.location.pathname возвращает путь до текущей страницы (без домена).

Пример.

alert(`Путь до страницы: ${window.location.pathname}`)

Window Location Protocol

Свойство window.location.protocol возвращает веб-протокол данной страницы (http или https).

Пример.

alert(`Страница имеет протокол: ${window.location.protocol}`)

Window Location Port

Свойство window.location.port возвращает номер порта данного хоста.

Пример.

alert(`Порт: ${window.location.port}`)

Некоторые браузеры не будут отображать номера портов по умолчанию (80 для http и 443 для https).

Свойство window.location.search содержит GET параметры - с добавлением в начале ?. Обычно называют «строка запроса» /search?q=text. Несколько параметров: ?id=18&title=phone.

Пример.

let yourData = ''
function sendData (yourData) {
    location.search = yourData
}

Т.о. мы изменяем параметры, которые хотим передать на сервер.

Window Location Hash

Свойство window.location.hash содержит id фрагмента, включая символ # (hash).

Пример.

let hash = window.location.hash;
alert(window.location.hash);

Window Location Assign()

Метод window.location.assign() загружает новую страницу.

Пример.

<input type="button" value="Загрузить новую страницу" onclick="newDoc()">

<script>
newDoc = () => {
    window.location.assign("https://only-to-top.ru")
}
</script>

Window Location Reload()

Метод window.location.reload() позволяет перезагрузить страницу (текущий URL).

Перезагрузка страницы с использованием кэша.

document.location.reload();

Перезагрузка текущей страницы без использования кэша, она будет заново загружена с сервера.

document.location.reload(true);

Window Location Replace()

Метод window.location.replace() позволяет перенаправить подобно HTTP-редиректу. Также текущая страница не будет сохранена в объекте History (нельзя будет использовать кнопку «Назад»).

Пример перенаправления через 2 секунды на страницу «Благодарности».

setTimeout(() => {
    window.location.replace('/page-thanks.php');
}, 2000);

Window Location toString()

Пример использования метода toString():

<a href="https://only-to-top.ru/blog/coding/2019-09-24-jquery-to-js.html" id="link">jQuery to JS</a>

<script>
    let link = document.getElementById('link');
    let link_url = link.toString();
    console.log(link_url);
</script>

Пример

Возьмем текущую страницу в качестве примера URL, к которому мы добавим все возможные параметры:

https://only-to-top.loc/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash

Это разделяется следующим образом:

[https:] // [only-to-top.ru] : [443] [/blog/coding/2019-11-30-javascript-window-location.html] [?name=value] [#hash]

Свойства объекта Window.location касательно данного примера:

[protocol] [hostname] [port] [pathname] [search] [hash]

admin