Расположение в JavaScript

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

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

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

Свойства местоположения в JavaScript

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

http://localhost:8080/js/index.html?type=listing&page=2#title
Code language: JavaScript (javascript)

Следующий рисунок иллюстрирует свойства объекта Location:

Location.href

location.href — это строка, которая содержит весь URL.

"http://localhost:8080/js/index.html?type=listing&page=2#title"
Code language: JSON / JSON with Comments (json)

Location.protocol

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

'http:'
Code language: JavaScript (javascript)

Location.host

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

"localhost:8080"
Code language: JSON / JSON with Comments (json)

Location.port

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

"8080"
Code language: JSON / JSON with Comments (json)

Location.pathname

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

"/js/index.html"
Code language: JSON / JSON with Comments (json)

Location.search

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

"?type=listing&page=2"
Code language: JSON / JSON with Comments (json)

Location.hash

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

"#title"
Code language: JSON / JSON with Comments (json)

Location.origin

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

"http://localhost:8080"
Code language: JSON / JSON with Comments (json)

Местоположение.имя пользователя

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

Location.password

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

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

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

 assign()

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

location.assign('https://www.javascripttutorial.net');
Code language: JavaScript (javascript)

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

window.location = 'https://www.javascripttutorial.net';
location.href = 'https://www.javascripttutorial.net';
Code language: JavaScript (javascript)

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

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

replace()

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

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

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

reload()

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

reload();

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

reload(true);    
Code language: JavaScript (javascript)

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

Резюме

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