JavaScript: Window Location

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

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

Window Location Href

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

Window Location Hostname

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

Window Location Pathname

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

Window Location Protocol

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

Window Location Port

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

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

Window Location Search

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

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

Window Location Hash

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

Window Location Assign()

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

Window Location Reload()

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

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

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

Window Location Replace()

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

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

Window Location toString()

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

Пример

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

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

[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.

Location

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

Свойства

Интерфейс Location не имеет унаследованных свойств, но реализует свойства URLUtils .

Location.href (en-US) DOMString , содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу. Location.protocol (en-US) DOMString , содержащий протокол текущего URL, включая ‘:’ . Location.host (en-US) DOMString , содержащий хост, а именно имя хоста, ‘:’ и порт. Location.hostname (en-US) DOMString , содержащий домен текущего URL. Location.port (en-US) DOMString , содержащий номер порта текущего URL. Location.pathname (en-US) DOMString , содержащий первый ‘/’ после хоста с последующим текстом URL. Location.search (en-US) DOMString , содержащий ‘?’ с последующими параметрами URL. Location.hash (en-US) DOMString , содержащий ‘#’ с последующим идентификатором. Location.username (en-US) DOMString , содержащий имя пользователя, указанное перед именем домена. Location.password (en-US) DOMString , содержащий пароль, указанный перед именем домена. Location.origin (en-US) Только для чтения Возвращает DOMString , содержащий протокол, хост и порт текущего URL.

Методы

Интерфейс Location не имеет унаследованных методов, но реализует методы URLUtils .

JavaScript Window Location

The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

Window Location

The window.location object can be written without the window prefix.

• window.location.href returns the href (URL) of the current page
• window.location.hostname returns the domain name of the web host
• window.location.pathname returns the path and filename of the current page
• window.location.protocol returns the web protocol used (http: or https:)
• window.location.assign() loads a new document

Window Location Href

The window.location.href property returns the URL of the current page.

Example

Display the href (URL) of the current page:

Window Location Hostname

The window.location.hostname property returns the name of the internet host (of the current page).

Example

Display the name of the host:

Window Location Pathname

The window.location.pathname property returns the pathname of the current page.

Example

Display the path name of the current URL:

Window Location Protocol

The window.location.protocol property returns the web protocol of the page.

Example

Display the web protocol:

Window Location Port

The window.location.port property returns the number of the internet host port (of the current page).

Example

Display the name of the host:

Most browsers will not display default port numbers (80 for http and 443 for https)

Window.location

Свойство только для чтения Window.location возвращает объект Location с информацией о текущем расположении документа.

Хотя Window.location представляет собой объект только для чтения Location , вы можете присвоить ему DOMString . Это значит что в большинстве случаев вы можете работать с location как со строкой: location = ‘http://www.example.com’ это синоним для location.href = ‘http://www.example.com’ .

Синтаксис

Примеры

Базовый пример

Пример №1: Переход на новую страницу

Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван location.assign() с изменённым URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.

Пример №2: Принудительная перезагрузка текущей страницы с сервера

Пример №3

Рассмотрим следующий пример, который будет перезагружать страницу используя метод replace() для вставки значения location.pathname в хэш:

Пример №4: Отображение свойств текущего URL в диалоге alert

Пример №5: Отправка строки данных на сервер через изменение свойства search

Текущий URL с добавлением «?Some%20data» отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счёт изменения строки search).

Пример №6: Использование закладок без изменения свойства hash

…тоже самое только с анимированной прокруткой страницы:

JavaScript — Объект location

На этом уроке мы познакомимся с объектом location , который может использоваться для получения или изменения текущего адреса страницы (URL).

Объект location

Объект location — это один из дочерних объектов window , который отвечает за адресную строку окна или вкладки браузера. Доступ к данному объекту осуществляется как к свойству объекта window , т.е. через точку.

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

Свойства объекта location

Свойства объекта location :

• hash — устанавливает или возвращает якорную часть (#) URL;
• host — устанавливает или возвращает имя хоста и номер порта URL;
• hostname — устанавливает или возвращает имя хоста URL;
• href — устанавливает или возвращает содержимое URL;
• origin — возвращает протокол, имя хоста и номер порта URL;
• pathname — устанавливает или возвращает часть URL, содержащей путь;
• port — устанавливает или возвращает номер порта URL;
• protocol — устанавливает или возвращает протокол URL;
• search — устанавливает или возвращает часть URL, содержащей строку с параметрами (?параметр1=значение1&параметр2=значение2&. );

В качестве примера рассмотрим следующую адресную строку (URL):

Примечание: Изменение URL или какой либо её части с помощью свойств объекта location приводит к немедленному переходу к этому URL в текущем окне, или в том окне или вкладке браузера, для которого этот объект был вызван.

Например, изменить href на http://itchief.ru для текущего окна:

Например, изменить href для окна с именем myWindow :

Например, вывести на экран все свойства и методы объекта location и их значения для текущей веб-страницы.

Методы объекта location

• assign() — загружает новый документ в текущее окно (вкладку) браузера или в то окно для которого этот метод был вызван.
• reload() — перезагружает текущий документ. Метод reload() имеет один необязательный параметр булевского типа. Если в качестве параметра указать значение true , то страница будет принудительно обновлена с сервера. А если параметр не указывать или использовать в качестве параметра значение false , то браузер может обновить страницу, используя данные своего кэша. Метод reload() «имитирует» нажатие кнопки обновить в браузере.
• replace() — заменяет текущий документ с помощью нового документа, URL которого указан в качестве параметра.

Рассмотрим следующие примеры:

1. При нажатии на ссылку загрузим в 1 фрейм страницу http://nigma.ru/ :

2. Откроем новое окно, в котором будем управлять адресной строкой с помощью методов объекта location :