JavaScript: Window Location

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

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

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

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

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

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

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

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

  1. window.location.href
  2. window.location.hostname
  3. window.location.pathname
  4. window.location.protocol
  5. window.location.port
  6. window.location.assign()
  7. window.location.reload()
  8. window.location.replace()
  9. window.location.search
  10. window.location.hash

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 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-редиректу.

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

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

Window Location Search

Свойство 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);
admin
30/11/2019 14:02