JavaScript: Window Location
Объект Window.location предоставляет информацию о текущем адресе страницы (URL), позволяет реализовать обновление (перезагрузку) страницы, перенаправление браузера на другой URL и многое другое.
Объект Window.location содержит следующие свойства и методы.
- window.location.href;
- window.location.origin;
- window.location.protocol;
- window.location.hostname;
- window.location.port;
- window.location.pathname;
- window.location.search;
- window.location.hash;
- window.location.assign();
- window.location.reload();
- window.location.replace();
- window.location.toString();
- пример.
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]
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (2)
- Малик
- Only to top