Location
Интерфейс Location представляет собой адрес (URL) объекта, с которым он связан. Его модификации отражаются на родительском объекте. Интерфейсы Document и Window имеют подобный Location , к которому можно получить доступ через Document.location и Window.location соответственно.
Свойства
Интерфейс Location не имеет унаследованных свойств, но реализует свойства URLUtils .
DOMString , содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу.
DOMString , содержащий протокол текущего URL, включая ‘:’ .
DOMString , содержащий хост, а именно имя хоста, ‘:’ и порт.
DOMString , содержащий домен текущего URL.
DOMString , содержащий номер порта текущего URL.
DOMString , содержащий первый ‘/’ после хоста с последующим текстом URL.
DOMString , содержащий ‘?’ с последующими параметрами URL.
DOMString , содержащий ‘#’ с последующим идентификатором.
DOMString , содержащий имя пользователя, указанное перед именем домена.
DOMString , содержащий пароль, указанный перед именем домена.
Возвращает DOMString , содержащий протокол, хост и порт текущего URL.
Методы
Интерфейс Location не имеет унаследованных методов, но реализует методы URLUtils .
Загружает ресурс по URL, указанному в качестве параметра.
Перезагружает ресурс по текущему URL. Единственный опциональный параметр Boolean (en-US) при значении true указывает, что страница должна быть заново загружена с сервера, при значении false страница может быть загружена из кеша.
Заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от assign() в том, что при использовании replace() текущая страница не будет сохранена в History , и пользователь не сможет использовать кнопку назад, чтобы вернуться к ней.
Возвращает DOMString , содержащий URL целиком. Это синоним URLUtils.href , однако он не может использоваться для изменения значения.
Примеры
// Этот пример создаёт ссылку и использует её свойство href // Корректная альтернатива - использовать document.location или window.location текущего URL var url = document.createElement('a'); url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org console.log(url.hostname); // developer.mozilla.org console.log(url.port); // (пустой - https подразумевает порт 443) console.log(url.pathname); // /en-US/search console.log(url.search); // ?q=URL console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org
Спецификации
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 17 окт. 2022 г. by MDN contributors.
Your blueprint for a better internet.
Location – URL текущей страницы
Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения и записи.
Доступ к Location обычно осуществляется через объекты Document.location или Window.location . Если скрипт запускается из iframe (в одном домене), доступ к родительскому окну доступен через window.parent.location .
Рассмотрим какие будут значения при следующим URL:
Location.href
Вернет полный URL страницы.
console.log(window.location.href);Результат:
http://www.example.com/pages/contats?page=1&sort=2#markerОбъекту location можно присвоить новый URL, браузер сразу перейдет на новую страницу.
window.location.href = 'https//snipp.ru';Так же для редиректа можно использовать методы location.assign() и location.replace() . Отличие последнего в том, что пользователь не сможет использовать кнопку «назад».
window.location.assign('https//snipp.ru');window.location.replace('https//snipp.ru');Location.protocol
Возвращает используемый протокол, включая : .
console.log(window.location.protocol);Результат:
Location.port
Номер порта, если его нет в URL, то ни чего не выведется.
console.log(window.location.port);Location.host
Содержит домен и порт (если есть).
console.log(window.location.host);Результат:
Шпаргалка по window.location
https://voiti-v-it.com/posts/76?filter=JS#2 window.location.origin → ‘https://voiti-v-it.com’ .protocol → ‘https:’ .host → ‘voiti-v-it.com’ .hostname → ‘voiti-v-it.com’ .port → » .pathname → ‘posts/76’ .search → ‘?filter=JS’ .hash → ‘#2’ .href → ‘https://voiti-v-it.com/posts/76?filter=JS#2’ window.location.assign(‘url’) .replace(‘url’) .reload() .toString()
window.location .origin Базовый URL (Протокол + имя хоста + номер порта) .protocol Протокол (http: или https) .host Доменное имя + порт .hostname Доменное имя .port Имя порта .pathname Строка пути (относительно хоста) .search Часть строки, которая следует после? (включая ?) .hash Часть строки, которая следует после # (якорь или идентификатор фрагмента) .href Полный URL
В моем примере выше ты заметишь, что
возвращают одно и то же значение. Так в чем же разница. Ну, это связано с номером порта. Давай взглянем.
https://voiti-v-it.com window.location.host; // ‘voiti-v-it.com’ window.location.hostname; // ‘voiti-v-it.com’ window.location.port; // »
http://voiti-v-it.com:8080 window.location.host; // ‘voiti-v-it.com:8080’ window.location.hostname; // ‘voiti-v-it.com’ window.location.port; // ‘8080’
будет содержать номер порта, тогда как
будет возвращать только имя хоста.
Ты можешь не только вызвать свойства объекта
чтобы получить информацию об URL. Ты можешь использовать его для установки новых свойств и изменения URL. Посмотрим, что я имею в виду.
http://voiti-v-it.com:8080 window.location.host; // ‘voiti-v-it.com:8080’ window.location.hostname; // ‘voiti-v-it.com’ window.location.port; // ‘8080’
Вот полный список свойств, которые ты можешь изменить:
http://voiti-v-it.com:8080 window.location.host; // ‘voiti-v-it.com:8080’ window.location.hostname; // ‘voiti-v-it.com’ window.location.port; // ‘8080’
Единственное свойство, которое ты не можешь установить, это
Это свойство доступно только для чтения.
который дает тебе информацию о текущем местоположении страницы. Ты также можешь получить доступ к объекту Location несколькими способами.
http://voiti-v-it.com:8080 window.location.host; // ‘voiti-v-it.com:8080’ window.location.hostname; // ‘voiti-v-it.com’ window.location.port; // ‘8080’
Объект доступен таким образом, потому что является глобальной переменной в браузере.
Каждый из 4х свойств выше указывают на один и тот же объект
и на самом деле не буду использовать
Главным образом потому, что
читается больше как общий термин, и кто-то может случайно назвать свою переменную, которая переопределяет глобальную переменную. Взять, к примеру:
Я думаю, что большинство разработчиков знают, что
является глобальной переменной. Так что у тебя меньше шансов вызвать путаницу. Поэтому я рекомендую использовать
Вот мой личный порядок предпочтений:
// ✅ 1. window.location // 🏆 2. document.location // ❌ 3. window.document.location // почему бы просто не использовать #1 or #2 😅 4. location // чувствуется слишком двусмысленно 😵
Конечно, это всего лишь мои предпочтения. Ты эксперт в своей кодовой базе, лучшего способа нет, лучший всегда тот, который подходит тебе и твоей команде.🤓
window.location .assign() Навигация происходит по указанному URL .replace() Навигация происходит по указанному URL & и текущая страница удаляется из истории .reload() Перезагружает текущую страницу .toString() Returns the URL
window.location.toString
Этот метод возвращает USVString URL. Версия только для чтения
Другими словами, ты можешь использовать его для получения значения
// https://voiti-v-it.com window.location.href; // https://voiti-v-it.com window.location.toString(); // https://voiti-v-it.com
Что касается использования, я не смог найти много информации о том, что лучше; но если ты это сделаешь, пожалуйста, поделись в комментах 😊. Я нашел тест производительности на разницу.
Один момент, который я хочу отметить в отношении этих тестов скорости, заключается в том, что они зависят от браузера. Различные браузеры и версии будут иметь разные результаты. Я использую Chrome, поэтому href вышел быстрее остальных. Так что я буду этим пользоваться. Также я думаю, что он читается более явно, чем
предоставит URL, тогда как
выглядит как нечто, преобразуемое в строку.😅
Оба эти метода помогут тебе перейти по другому URL. Разница в том, что
сохранит твою текущую страницу в истории, поэтому твой пользователь может использовать кнопку «назад» для перехода к ней. Принимая во внимание метод
он не сохраняет его истории. Это немного смущает, да? Меня тоже. Давай пройдемся по примерам.
1. Открыть новую вкладку 2. Перейти https://voiti-v-it.com (текущая страница) 3. Загрузить нвоую страницу 👉 `window.location.assign(‘https://www.w3schools.com’)` 4. Нажать «назад» 5. Вернемся на 👉 https://voiti-v-it.com
1. Открыть новую вкладку 2. Перейти https://voiti-v-it.com (текущая страница) 3. Загрузить нвоую страницу 👉 `window.location.assign(‘https://www.w3schools.com’)` 4. Нажать «назад» 5. Вернемся на 👉 чистую страницу
Мне просто нужно подчеркнуть «текущая страница» в определении. Это страница прямо перед
1. Открыть новую вкладку 2. Перейти www.developer.mozilla.org 3. Перейти https://voiti-v-it.com 👈 это будет текущая страница 4. window.location.assign(‘https://www.w3schools.com’); // Перейдет к #3 4. window.location.replace(‘https://www.w3schools.com’); // Перейдет к #2
Теперь ты знаешь, что мы можем изменить свойства
присвоив значение с помощью
Точно так же существуют методы, к которым мы можем получить доступ для выполнения некоторых действий. Итак, что касается «как перенаправить/редиректить на другую страницу», то есть 3 способа.
// Установить свойство href window.location.href = ‘https://voiti-v-it.com’; // Использование Assign window.location.assign(‘https://voiti-v-it.com’); // Использование Replace window.location.replace(‘https://voiti-v-it.com’);
replace vs assign vs href
Все три перенаправляют, разница связана с историей браузера.
здесь одинаковы. Они сохранят твою текущую страницу в истории, а
— нет. Так что, если ты предпочитаешь опыт создания, когда навигация не может вернуться на исходную страницу, используй
Таким образом, вопрос сейчас:
Я считаю, что это личные предпочтения. Мне больше нравится
потому что это метод, поэтому мне кажется, что я выполняю какое-то действие. Также есть дополнительный бонус в том, что его проще тестировать. Я писал много Jest-тестов, поэтому, используя метод можно просто замокать данные.
window.location.assign = jest.fn(); myUrlUpdateFunction(); expect(window.location.assign).toBeCalledWith(‘http://my.url’);
Но для тех, которые болеют за
для редиректа страницы. Я нашел тест производительности и он работает в моей версии Chrome быстрее. Опять же, тесты производительности варьируются в зависимости от браузера и разных версий, сейчас это может быть быстрее, но, возможно, в будущих браузерах всё может измениться.
Как это все появилось 👍
Ладно, я готов с вами поделиться как появилась эта шпаргалка. Я гуглил, как редиректить на другую страницу, и столкнулся с объектом
Иногда я чувствую, что разработчик является журналистом или детективом — для того, чтобы собрать всю доступную информацию, приходится много копаться и прочесывать разные источники. Честно говоря, я был ошеломлен материалами, они все были “о разном”, а я просто хотел всё из одного источника. Я не мог найти много полной информации, поэтому я подумал, а расскажу-ка я об этом в шпаргалке!
Ещё больше полезного в наших соц. сетях instagram, facebook, telegram