Разработка
Войти в IT

Шпаргалка по window.location

Наши соц. сети: instagram, facebook, telegram

Ищешь данные URL сайта, тогда объект

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

window.location .origin Базовый URL (Протокол + имя хоста + номер порта) .protocol Протокол (http: или https) .host Доменное имя + порт .hostname Доменное имя .port Имя порта .pathname Строка пути (относительно хоста) .search Часть строки, которая следует после? (включая ?) .hash Часть строки, которая следует после # (якорь или идентификатор фрагмента) .href Полный URL

Разница между host и hostname

В моем примере выше ты заметишь, что

host

и

hostname

возвращают одно и то же значение. Так в чем же разница. Ну, это связано с номером порта. Давай взглянем.

URL без порта

https://voiti-v-it.com window.location.host; // 'voiti-v-it.com' window.location.hostname; // 'voiti-v-it.com' window.location.port; // ''

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'

Таким образом,

host

будет содержать номер порта, тогда как

hostname

будет возвращать только имя хоста.

Как изменить свойства URL

Ты можешь не только вызвать свойства объекта

location

чтобы получить информацию об 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'

Единственное свойство, которое ты не можешь установить, это

window.location.origin

Это свойство доступно только для чтения.

Объект Location

window.location

возвращает объект

Location

который дает тебе информацию о текущем местоположении страницы. Ты также можешь получить доступ к объекту 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'

Объект доступен таким образом, потому что является глобальной переменной в браузере.

window.location vs location

Каждый из 4х свойств выше указывают на один и тот же объект

Location

Я лично предпочитаю

window.location

и на самом деле не буду использовать

location

Главным образом потому, что

location

читается больше как общий термин, и кто-то может случайно назвать свою переменную, которая переопределяет глобальную переменную. Взять, к примеру:

// https://www.samanthaming.com location.protocol; // 'https' function localFile() { const location = '/sam'; return location.protocol; // ❌ undefined // локальная "location" преопределяет глобальную переменную }

Я думаю, что большинство разработчиков знают, что

window

является глобальной переменной. Так что у тебя меньше шансов вызвать путаницу. Поэтому я рекомендую использовать

window.location

вместо

location

Вот мой личный порядок предпочтений:

// ✅ 1. window.location // 🏆 2. document.location // ❌ 3. window.document.location // почему бы просто не использовать #1 or #2 😅 4. location // чувствуется слишком двусмысленно 😵

Конечно, это всего лишь мои предпочтения. Ты эксперт в своей кодовой базе, лучшего способа нет, лучший всегда тот, который подходит тебе и твоей команде.🤓

Методы window.location

window.location .assign() Навигация происходит по указанному URL .replace() Навигация происходит по указанному URL & и текущая страница удаляется из истории .reload() Перезагружает текущую страницу .toString() Returns the URL

window.location.toString

Вот определение из MDN

Этот метод возвращает USVString URL. Версия только для чтения

Location.href

Другими словами, ты можешь использовать его для получения значения

href

из

// https://voiti-v-it.com window.location.href; // https://voiti-v-it.com window.location.toString(); // https://voiti-v-it.com

Что касается использования, я не смог найти много информации о том, что лучше; но если ты это сделаешь, пожалуйста, поделись в комментах 😊. Я нашел тест производительности на разницу.

Один момент, который я хочу отметить в отношении этих тестов скорости, заключается в том, что они зависят от браузера. Различные браузеры и версии будут иметь разные результаты. Я использую Chrome, поэтому href вышел быстрее остальных. Так что я буду этим пользоваться. Также я думаю, что он читается более явно, чем

toString()

Совершенно очевидно, что

href

предоставит URL, тогда как

toString

выглядит как нечто, преобразуемое в строку.😅

assign vs replace

Оба эти метода помогут тебе перейти по другому URL. Разница в том, что

assign

сохранит твою текущую страницу в истории, поэтому твой пользователь может использовать кнопку «назад» для перехода к ней. Принимая во внимание метод

replace

он не сохраняет его истории. Это немного смущает, да? Меня тоже. Давай пройдемся по примерам.

Assign

1. Открыть новую вкладку 2. Перейти https://voiti-v-it.com (текущая страница) 3. Загрузить нвоую страницу 👉 `window.location.assign('https://www.w3schools.com')` 4. Нажать "назад" 5. Вернемся на 👉 https://voiti-v-it.com

Replace

1. Открыть новую вкладку 2. Перейти https://voiti-v-it.com (текущая страница) 3. Загрузить нвоую страницу 👉 `window.location.assign('https://www.w3schools.com')` 4. Нажать "назад" 5. Вернемся на 👉 чистую страницу

Текущая страница

Мне просто нужно подчеркнуть «текущая страница» в определении. Это страница прямо перед

assign

или

replace

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

Как сделать редирект страницы

Теперь ты знаешь, что мы можем изменить свойства

window.location

присвоив значение с помощью

=

Точно так же существуют методы, к которым мы можем получить доступ для выполнения некоторых действий. Итак, что касается «как перенаправить/редиректить на другую страницу», то есть 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

Все три перенаправляют, разница связана с историей браузера.

href

и

assign

здесь одинаковы. Они сохранят твою текущую страницу в истории, а

replace

- нет. Так что, если ты предпочитаешь опыт создания, когда навигация не может вернуться на исходную страницу, используй

replace

Таким образом, вопрос сейчас:

href

vs

assign

Я считаю, что это личные предпочтения. Мне больше нравится

assign

потому что это метод, поэтому мне кажется, что я выполняю какое-то действие. Также есть дополнительный бонус в том, что его проще тестировать. Я писал много Jest-тестов, поэтому, используя метод можно просто замокать данные.

window.location.assign = jest.fn(); myUrlUpdateFunction(); expect(window.location.assign).toBeCalledWith('http://my.url');

Но для тех, которые болеют за

href

для редиректа страницы. Я нашел тест производительности и он работает в моей версии Chrome быстрее. Опять же, тесты производительности варьируются в зависимости от браузера и разных версий, сейчас это может быть быстрее, но, возможно, в будущих браузерах всё может измениться.

Как это все появилось 👍

Ладно, я готов с вами поделиться как появилась эта шпаргалка. Я гуглил, как редиректить на другую страницу, и столкнулся с объектом

window.location

Иногда я чувствую, что разработчик является журналистом или детективом - для того, чтобы собрать всю доступную информацию, приходится много копаться и прочесывать разные источники. Честно говоря, я был ошеломлен материалами, они все были “о разном”, а я просто хотел всё из одного источника. Я не мог найти много полной информации, поэтому я подумал, а расскажу-ка я об этом в шпаргалке!

Ещё больше полезного в наших соц. сетях instagram, facebook, telegram

0
2 комментария
Популярные
По порядку
Стартапер-пессимист

Немного устарело. Гораздо лучше использовать: https://developer.mozilla.org/ru/docs/Web/API/URL

Ответить
0
Развернуть ветку
Войти в IT

Спасибо, изучу вопрос)

Ответить
0
Развернуть ветку
Читать все 2 комментария
Как оценивать дизайн: Метод 3К, ч. 1

Раскладываем процесс оценки разрабатываемого дизайна на систему вопросов.

Apple добавила в бета-версию iOS 15.4 возможность разблокировать iPhone лицом в маске Статьи редакции

Устройство распознаёт пользователя по особенностям области вокруг глаз.

«Здесь был Вася»: как защитить персональные данные людям и компаниям

Для начала, как бы просто это не звучало, не раздавать свои персональные данные направо и налево. А компаниям -- не собирать те данные, которые они не в состоянии обработать и надежно сохранить. Сегодня, 28 января, – день защиты персональных данных. По этому случаю составил максимально простой чек-лист для тех, кому не все равно, где и как…

hh.ru усилил продуктовое направление новым составом топ-менеджеров

В hh.ru провели реорганизацию продуктового направления. В начале 2022 года на ведущие роли в продуктовый блок hh.ru вышли опытные российские менеджеры с богатой продуктовой экспертизой российских и зарубежных технологических компаний, а в ближайший год компания планирует нанять свыше 100 сотрудников разного уровня в продуктовое развитие и…

Почему отключение SWIFT не разрушит российскую банковскую систему, и чего действительно стоит бояться

С 2014 года мы слышим о возможном отключении России от системы SWIFT. В последние недели эти разговоры все чаще звучат в медиа и серьезно влияют на настроения в банковской среде. CBDO Банка 131 Анна Кузьмина рассказала, почему блокировка SWIFT в России не смертельный сценарий, и какие санкции против банков на самом деле вызывают беспокойство.

Apple отчиталась о рекордной выручке в $123,9 млрд за квартал Статьи редакции

Больше половины принесли продажи iPhone.

Ozon запустил сервис Ozon Profit — в нём можно заработать на выполнении простых задач для маркетплейса Статьи редакции

За 4-6 часов работы в день — около 20 тысяч рублей в месяц.

Почему вредно пытаться взять кредит в АльфаБанке

Кратко: я старый (и вредный) клиент АльфаБанк, в основном из-за удобной карты Аэрофлот Бонус. Мы то соримся, то миримся (не они со мной, а я с ними). У меня архивный пакет Максимум Плюс (условия: 1 млн на счету + 50 тр трат в месяц).

Как снизить стоимость за установку приложения с помощью тестирования креатива: кейс Joom и Aitarget Tech

Может ли цвет креатива или расположение цены влиять на стоимость установки приложения? Эти и другие гипотезы платформа Aitarget Tech позволяет тестировать для Joom, одного из крупнейших маркетплейсов в Европе и Азии. Делимся результатами тестирования гипотез и рассказываем о подходе, который позволяет автоматизировать процесс.

Московский акселератор – короткий путь к мечте!

У нас отличная новость: стартовала постакселерационная программа для участников треков AI Factory, T&M, Digital health, ArchTech. И он отличается от тех постакселераторов, какие были до этого. Чем? Сейчас расскажем.

Как мы сделали своё радио, Радио.Mesto

Отступили новогодние праздники. Жена с детьми уехали к друзьям, я сижу на кухне своего дома среди рисовых полей Убуда, пью кофе, слушаю пластинку Bonobo и, не нарушая сон котов, могу, наконец, рассказать историю Радио.Mesto.

null