Location в JavaScript — определение местоположения

В этом руководстве вы узнаете об объекте  Location в JavaScript и о том, как эффективно определять и управлять местоположением.

Объект Location представляет текущее местоположение (URL) документа. Вы можете получить доступ к объекту, сославшись на свойство location window или объекта document.

И window.location, и document.location ссылаются на один и тот же объект.

Свойства

Предположим, что текущий URL:

http://localhost:8080/js/index.html?type=listing&page=2#title

На следующем изображении показаны свойства объекта Location :

<img class=»lazyload alignnone wp-

Location.href

location.href — это строка, содержащая полный URL-адрес.

"http://localhost:8080/js/index.html?type=listing&page=2#title"

Location.protocol

location.protocol представляет схему протокола URL-адреса, включая последнее двоеточие( : ).

'http:'

Location.host

location.host представляет имя хоста:

"localhost:8080"

Location.port

location.port представляет номер порта URL-адреса.

"8080"

Location.pathname

location.pathname содержит начальный символ ‘/’ за которым следует путь к URL-адресу.

"/js/index.html"

Location.search

location.search — это строка, представляющая строку запроса URL-адреса:

"?type=listing&page=2"

Location.hash

location.hash возвращает строку, содержащую «#», за которой следует идентификатор фрагмента URL-адреса.

"#title"

Location.origin

location.origin — это строка, содержащая каноническую форму происхождения определенного местоположения.

"http://localhost:8080"

Location.username

location.username — это строка, содержащая имя пользователя перед именем домена.

Location.password

location.password — это строка, представляющая пароль, указанный перед именем домена.

Управление местоположением

Объект Location имеет ряд полезных методов: assign(), reload() и replace().

assign()

Метод assign() принимает URL-адрес, немедленно переходит по URL-адресу и делает запись в стеке истории браузера.

location.assign('https://www.javascripttutorial.net');

Когда для window.location или location.href задан URL-адрес, метод assign() вызывается неявно:

window.location = 'https://www.javascripttutorial.net';
location.href = 'https://www.javascripttutorial.net';

Если вы измените hostname, pathname или свойство port, страница перезагрузится с новым значением. Обратите внимание, что изменение свойства hash не перезагружает страницу, но записывает новую запись в стек истории браузера.

Когда в стеке истории браузера создается новая запись, вы можете нажать кнопку «Назад» в браузере, чтобы перейти на предыдущую страницу.

replace()

Метод replace() аналогичен методу assign(), за исключением того, что он не создает новую запись в стеке истории браузера. Поэтому вы не можете нажать кнопку «Назад», чтобы перейти на предыдущую страницу.

В следующем коде используется метод replace() для перехода к URL-адресу https://www.javascripttutorial.net через 3 секунды:

setTimeout(() => {
    location.replace('https://www.javascripttutorial.net');
}, 3000);

reload()

Метод reload() перезагружает текущую отображаемую страницу. Когда вы вызываете метод reload() без аргументов, браузер перезагружает страницу наиболее эффективным способом, например, он загружает ресурсы страницы из кэша браузера, если они не изменились с момента последнего запроса.

reload();

Чтобы принудительно выполнить перезагрузку с сервера, вы передаете true методу reload() :

reload(true);    

Обратите внимание, что код после reload() может выполняться или не выполняться, в зависимости от многих факторов, таких как задержка сети и системные ресурсы. Поэтому рекомендуется размещать reload() в качестве последней строки кода.

Заключение

• Объект Location представляет текущий URL-адрес страницы. Доступ к нему можно получить через window.location или document.location.
• Объект Location имеет ряд свойств, представляющих URL-адрес, таких как protocol, host, pathname и search.
• Чтобы управлять местоположением, устанавливайте новые значения его свойств или используйте методы assign(), replace() и reload().