Объект 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-адресом.
Существуют также методы для выполнения различных действий с загруженной в данный момент страницей, так что следите за обновлениями в следующей части этой серии.