Ищешь данные URL сайта, тогда объект
window.location
как раз для тебя! Используй его свойства для получения информации об адресе текущей страницы или используй его методы для редиректа, перезагрузки некоторых страниц 💫
Свойства window.location
Разница между host и hostname
В моем примере выше ты заметишь, что
host
и
hostname
возвращают одно и то же значение. Так в чем же разница. Ну, это связано с номером порта. Давай взглянем.
URL без порта
URL с портом
Таким образом,
host
будет содержать номер порта, тогда как
hostname
будет возвращать только имя хоста.
Как изменить свойства URL
Ты можешь не только вызвать свойства объекта
location
чтобы получить информацию об URL. Ты можешь использовать его для установки новых свойств и изменения URL. Посмотрим, что я имею в виду.
Вот полный список свойств, которые ты можешь изменить:
Единственное свойство, которое ты не можешь установить, это
window.location.origin
Это свойство доступно только для чтения.
Объект Location
window.location
возвращает объект
Location
который дает тебе информацию о текущем местоположении страницы. Ты также можешь получить доступ к объекту Location несколькими способами.
Объект доступен таким образом, потому что является глобальной переменной в браузере.
window.location vs location
Каждый из 4х свойств выше указывают на один и тот же объект
Location
Я лично предпочитаю
window.location
и на самом деле не буду использовать
location
Главным образом потому, что
location
читается больше как общий термин, и кто-то может случайно назвать свою переменную, которая переопределяет глобальную переменную. Взять, к примеру:
Я думаю, что большинство разработчиков знают, что
window
является глобальной переменной. Так что у тебя меньше шансов вызвать путаницу. Поэтому я рекомендую использовать
window.location
вместо
location
Вот мой личный порядок предпочтений:
Конечно, это всего лишь мои предпочтения. Ты эксперт в своей кодовой базе, лучшего способа нет, лучший всегда тот, который подходит тебе и твоей команде.🤓
Методы window.location
window.location.toString
Вот определение из MDN
Этот метод возвращает USVString URL. Версия только для чтения
Location.href
Другими словами, ты можешь использовать его для получения значения
href
из
Что касается использования, я не смог найти много информации о том, что лучше; но если ты это сделаешь, пожалуйста, поделись в комментах 😊. Я нашел тест производительности на разницу.
Один момент, который я хочу отметить в отношении этих тестов скорости, заключается в том, что они зависят от браузера. Различные браузеры и версии будут иметь разные результаты. Я использую Chrome, поэтому href вышел быстрее остальных. Так что я буду этим пользоваться. Также я думаю, что он читается более явно, чем
toString()
Совершенно очевидно, что
href
предоставит URL, тогда как
toString
выглядит как нечто, преобразуемое в строку.😅
assign vs replace
Оба эти метода помогут тебе перейти по другому URL. Разница в том, что
assign
сохранит твою текущую страницу в истории, поэтому твой пользователь может использовать кнопку «назад» для перехода к ней. Принимая во внимание метод
replace
он не сохраняет его истории. Это немного смущает, да? Меня тоже. Давай пройдемся по примерам.
Assign
Replace
Текущая страница
Мне просто нужно подчеркнуть «текущая страница» в определении. Это страница прямо перед
assign
или
replace
Как сделать редирект страницы
Теперь ты знаешь, что мы можем изменить свойства
window.location
присвоив значение с помощью
=
Точно так же существуют методы, к которым мы можем получить доступ для выполнения некоторых действий. Итак, что касается «как перенаправить/редиректить на другую страницу», то есть 3 способа.
replace vs assign vs href
Все три перенаправляют, разница связана с историей браузера.
href
и
assign
здесь одинаковы. Они сохранят твою текущую страницу в истории, а
replace
- нет. Так что, если ты предпочитаешь опыт создания, когда навигация не может вернуться на исходную страницу, используй
replace
Таким образом, вопрос сейчас:
href
vs
assign
Я считаю, что это личные предпочтения. Мне больше нравится
assign
потому что это метод, поэтому мне кажется, что я выполняю какое-то действие. Также есть дополнительный бонус в том, что его проще тестировать. Я писал много Jest-тестов, поэтому, используя метод можно просто замокать данные.
Но для тех, которые болеют за
href
для редиректа страницы. Я нашел тест производительности и он работает в моей версии Chrome быстрее. Опять же, тесты производительности варьируются в зависимости от браузера и разных версий, сейчас это может быть быстрее, но, возможно, в будущих браузерах всё может измениться.
Как это все появилось 👍
Ладно, я готов с вами поделиться как появилась эта шпаргалка. Я гуглил, как редиректить на другую страницу, и столкнулся с объектом
window.location
Иногда я чувствую, что разработчик является журналистом или детективом - для того, чтобы собрать всю доступную информацию, приходится много копаться и прочесывать разные источники. Честно говоря, я был ошеломлен материалами, они все были “о разном”, а я просто хотел всё из одного источника. Я не мог найти много полной информации, поэтому я подумал, а расскажу-ка я об этом в шпаргалке!
Немного устарело. Гораздо лучше использовать: https://developer.mozilla.org/ru/docs/Web/API/URL
Спасибо, изучу вопрос)