Разработка
Войти в 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 комментария
«Яндекс» купит технологическую платформу рекламного сервиса eLama Статьи редакции

Платформа сохранит название и продолжит развиваться под брендом eLama.

Образование, путешествия и благотворительность: на что тратились россияне в новогодние каникулы

Новогодние праздники — один из самых расточительных периодов года. Аналитики CloudPayments выяснили, какие категории товаров были самыми популярными в онлайне с 31 декабря по 9 января.

Банки Wall Street ожидают более агрессивных действий от ФРС

В США за последние 40 лет потребительская инфляция достигла угрожающих значений

Китайский такси-сервис Didi сократил количество сотрудников в России — РБК Статьи редакции

Компания увольняет людей из-за проблем материнской компании, которая вынуждена уйти с Нью-Йоркской биржи на фоне давления китайских властей.

Люди на вырост: как it-компании получить новых сотрудников с нужными компетенциями

Чем занимаются стажеры «Ситимобила» — рассказывает (теперь уже) штатная сотрудница компании.

Как Counter Strike сделал меня веб-разработчиком и как я открыл свою веб-студию

Я, как и многие подростки, начинал свой путь с компьютерных игр, вернее с видеоигр, тогда еще компьютеры не были настолько популярными. Да, я про те времена, когда мы зависали, играя в приставку SEGA и у нас горели блоки питания от перегрева, кто в теме, тот поймет =)

Блокчейн-проект TON создаст платёжную систему, аналог Tor и другие сервисы Статьи редакции

Их разрабатывают так, чтобы сервисы можно было интегрировать в Telegram.

Альфабанк. Звонки от фейковой "службы безопасности банка"

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

Копировать мир и стать посредником всех услуг: как Meta может монетизировать метавселенную Статьи редакции

Financial Times проанализировало патенты, которые зарегистрировала компания — они не означают, что Meta создаст технологию, но дают представление о примерном развитии метавселенной.

Узнай, как мы делаем бизнес

Команда Southbridge и Слёрм запускает серию бесплатных вебинаров «Как делается бизнес», которые помогут руководителям проектов, директорам выйти за стандартные рамки управления и эффективно развивать компанию.

null