Объект window - это глобальный объект, который имеет свойства, относящиеся к текущему документу DOM, то есть то, что находится на вкладке браузера.

В этой статье мы рассмотрим свойства объекта window.document, включая свойства объекта window.document.location.

window.document.location

document.location - свойство только для чтения, возвращает объект Location, который является информацией об URL-адресе текущего документа и предоставляет нам методы для изменения и загрузки URL-адресов.

Несмотря на то, что это Location объект только для чтения, если мы назначим ему строку, он загрузит URL в строку.

Например, если мы хотим загрузить 'https://medium.com', мы можем назначить его прямо свойству document.location, как в следующем коде:

document.location = 'https://medium.com';

Это то же самое, что присвоить тот же URL-адрес свойству document.location.href:

document.location.href = 'https://medium.com';

Оба фрагмента кода загрузят https://medium.com. Объект Location имеет следующие свойства:

  • Location.href
  • Location.protocol
  • Location.host
  • Location.hostname
  • Location.port
  • Location.pathname
  • Location.search
  • Location.hash
  • Location.username
  • Location.password
  • Location.origin

Location.href

Свойство location.href - это строка, содержащая весь URL-адрес. Мы оба можем использовать его, чтобы получить URL-адрес текущей страницы и установить URL-адрес, чтобы мы могли перейти на следующую страницу. Например, если у нас есть:

console.log(location.href);

Затем мы получаем полный URL-адрес, который выглядит примерно так:

https://fiddle.jshell.net/_display/

Мы также можем использовать его для перехода на другую страницу. Например, мы можем написать:

document.location.href = 'https://medium.com';

Перейти на сайт Medium. Он делает то же самое, что и:

document.location = 'https://medium.com';

Если текущий документ не находится в контексте просмотра, тогда значение этого свойства равно null.

Location.protocol

Мы можем использовать свойство protocol, чтобы получить протокольную часть URL-адреса, которая является самой первой частью URL-адреса перед первым двоеточием (:). Например, мы можем использовать это как в следующем коде:

console.log(document.location.protocol);

Затем мы получаем https: для веб-страницы HTTPS и http: для страниц HTTP. Мы также можем установить протокол, как в следующем коде:

document.location.protocol = 'http';

Если приведенный выше код запущен, браузер попытается перейти к HTTP-версии текущей страницы.

Location.host

Свойство host содержит строку имени хоста. Если есть порт с именем хоста, он также будет включен. Например, мы можем получить имя хоста следующим образом:

console.log(document.location.host);

Затем мы получаем что-то вроде fiddle.jshell.net из оператора console.log. Мы также можем установить свойство host. Если мы напишем что-то вроде следующего кода:

document.location.host = 'medium.com';

Затем браузер переключит имя хоста для текущей страницы на новое и попытается загрузить URL-адрес с новым именем хоста.

Location.hostname

Свойство hostname - это строковое свойство, которое содержит домен URL-адреса. Например, мы можем получить домен, запустив:

console.log(document.location.hostname);

Тогда мы получаем что-то вроде fiddle.jshell.net из оператора console.log. Мы также можем установить свойство host. Если мы напишем что-то вроде следующего кода:

document.location.hostname = 'medium.com';

Затем браузер переключит домен для текущей страницы на новый и попытается загрузить URL-адрес с новым именем хоста.

Location.port

Свойство port позволяет нам получить и установить порт URL-адреса. Это строковое свойство. Если в URL-адресе нет номера порта, будет установлена ​​пустая строка. Например, если у нас есть:

console.log(document.location.port);

Тогда мы получим что-то вроде “3000”, если порт 3000. Мы также можем установить свойство host. Если мы напишем что-то вроде следующего кода:

document.location.port = '3001';

Затем браузер переключит порт для текущей страницы на новый и попытается загрузить URL-адрес с новым номером порта.

Location.pathname

Свойство pathname - это строковое свойство, за которым после косой черты следует путь URL-адреса, который является всем, что находится после домена. Если нет пути, значением будет пустая строка. Например, если у нас есть:

console.log(document.location.pathname);

Тогда получаем что-то вроде “/_display/”. Мы также можем установить свойство pathname. Если мы напишем что-то вроде следующего кода:

document.location.pathname = '3001';

Затем браузер переключит путь для текущей страницы на новый и попытается загрузить URL-адрес с новым путем.

Location.search

Свойство search - это строковое свойство, которое возвращает нам строку запроса. Строка запроса - это часть URL-адреса после ?. Например, мы можем получить часть строки запроса URL-адреса текущей загруженной страницы, запустив:

console.log(document.location.search);

Тогда получаем что-то вроде:

"?key=value"

Если у нас есть URL типа http: // localhost: 3000 /? Key = value. Чтобы проанализировать строку запроса и управлять ею, мы можем преобразовать ее в объект URLSearchParams. Если мы хотим перейти по URL-адресу с другой строкой запроса, мы можем назначить новую строку запроса свойству document.location.search, как мы это делаем в следующем коде:

document.location.search = '?newKey=newValue';

Тогда новый URL-адрес для нашей вкладки браузера будет http: // localhost: 3000 /? NewKey = newValue.

Location.hash

Свойство hash позволяет нам получить и установить часть URL-адреса после знака фунта (#). Хэш не декодируется на процент. Если хеш-фрагмента нет, значением будет пустая строка. Например, мы можем получить часть строки запроса URL-адреса текущей загруженной страницы, запустив:

console.log(document.location.hash);

Тогда получаем что-то вроде:

"#hash"

если у нас есть URL типа http: // localhost: 3000 /? key = value. Если мы хотим перейти по URL-адресу с другой строкой запроса, мы можем назначить новую строку запроса свойству document.location.hash, как мы это делаем в следующем коде:

document.location.hash= '#newHash';

Тогда новый URL-адрес для нашей вкладки браузера будет http: // localhost: 3000 /? NewKey = newValue.

Location.username

Свойство username возвращает нам часть имени пользователя URL-адреса, возвращаемого в виде строки, которая является частью между протоколом и двоеточием. Например, если мы перешли на http: // имя пользователя: пароль @ localhost: 3000 /, то document.location.username получит нас 'username'. Если мы присвоим ему такой же код:

document.location.username = 'newUsername'

Тогда новая страница будет http: // newUsername : password @ localhost: 3000 /.

Location.password

Свойство password возвращает нам часть имени пользователя URL-адреса, возвращаемого в виде строки, которая является частью между протоколом и двоеточием. Например, если мы перешли на http: // имя пользователя: пароль @ localhost: 3000 /, то document.location.password получит нас 'password'. Если мы присвоим ему как остроумие следующий код:

document.location.password= 'newPassword'

Тогда новая страница будет иметь вид http: // имя пользователя : newPassword @ localhost: 3000 /.

Location.origin

Свойство origin - это строковое свойство, доступное только для чтения, которое имеет источник представленного URL-адреса.

Для URL-адресов с http или https он будет включать протокол, за которым следует ://, за которым следует домен, за которым следует двоеточие, а затем порт, если он явно указан.

Для URL-адреса со схемой file: значение зависит от браузера. Для blob URL-адресов источником URL будет часть, следующая за blob:. Например, мы можем зарегистрировать свойство origin, как в следующем коде:

console.log(document.location.origin);

чтобы получить что-то вроде:

https://fiddle.jshell.net

Объект window.document.location - это объект, имеющий URL-адрес текущей страницы.

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

Существуют также методы для выполнения различных действий с загруженной в данный момент страницей, так что следите за обновлениями в следующей части этой серии.