JavaScript: Window Location

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

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

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

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     → "80 | 443"
               .pathname → "/blog/coding/2019-11-30-javascript-window-location.html"
               .search   → "?name=value"
               .hash     → "#hash"

Методы:

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

Window Location Href

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

Пример.

alert(`URL со всеми параметрами: ${window.location}`); // https://bla-bla.html?name=value#hash

Window Location Origin

Возвращает протокол, хост и порт.

Возвращает текущий URL. Пример:

const current_url = window.location.origin;

alrt(current_url); // [https:]//[only-to-top.ru]:[443]

Window Location Protocol

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

Пример.

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

Window Location Hostname

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

Пример.

alert(`Хост: ${window.location.hostname}`); // only-to-top.ru

Window Location Port

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

Пример.

alert(`Порт: ${window.location.port}`); // 80 | 443

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

Window Location Pathname

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

Пример.

alert(`Путь: ${window.location.pathname}`); // /blog/coding/2019-11-30-javascript-window-location.html

Window Location Search

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

Пример. Пусть у нас url заканчивается на ?id=97, тогда получим:

let search_string = location.search;

console.log(search_string); // ?id=97

Пример изменения параметров:

let your_data = "";

function sendData(your_data) {
    location.search = your_data;
}

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

Window Location Hash

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

Пример.

let hash = window.location.hash;

alert(hash); // #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);
    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]