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

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

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

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

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

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

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

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'

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

Каждый из 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 .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

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

JSPerf: Location toString vs Location href

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

toString()

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

href

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

toString

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

Оба эти метода помогут тебе перейти по другому 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

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

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

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

assign

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

assign

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

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

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

href

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

JSPerf: href vs assign

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

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

window.location

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

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

Свойства window.location

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

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

Объект Location

window.location vs location

Методы window.location

assign vs replace

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