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

May 30, 2020 · 5 min read

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

как раз для тебя! Используй его свойства для получения информации об адресе текущей страницы или используй его методы для редиректа, перезагрузки некоторых страниц 💫

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

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

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

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. Ты можешь использовать его для установки новых свойств и изменения 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

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

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

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

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

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

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

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

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

// ✅ 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

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

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

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

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

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

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

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

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

assign vs replace

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

JavaScript: Window Location

Объект Window.location предоставляет информацию о текущем адресе страницы (URL), позволяет реализовать обновление (перезагрузку) страницы, перенаправление браузера на другой URL и многое другое.

Объект Window.location содержит следующие свойства и методы.

Window Location Href

Данный метод вернёт href (URL) текущей страницы (полный путь). Можно использовать без префикса href , просто location .

Window Location Hostname

Свойство window.location.hostname возвращает имя хоста текущей страницы (без порта).

Window Location Pathname

Свойство window.location.pathname возвращает путь до текущей страницы (без домена).

Window Location Protocol

Свойство window.location.protocol возвращает веб-протокол данной страницы (http или https).

Window Location Port

Свойство window.location.port возвращает номер порта данного хоста.

Некоторые браузеры не будут отображать номера портов по умолчанию (80 для http и 443 для https).

Window Location Search

Свойство window.location.search содержит GET параметры — с добавлением в начале ? . Обычно называют «строка запроса» /search?q=text . Несколько параметров: ?id=18&title=phone .

Т.о. мы изменяем параметры, которые хотим передать на сервер.

Window Location Hash

Свойство window.location.hash содержит id фрагмента, включая символ # (hash).

Window Location Assign()

Метод window.location.assign() загружает новую страницу.

Window Location Reload()

Метод window.location.reload() позволяет перезагрузить страницу (текущий URL).

Перезагрузка страницы с использованием кэша.

Перезагрузка текущей страницы без использования кэша, она будет заново загружена с сервера.

Window Location Replace()

Метод window.location.replace() позволяет перенаправить подобно HTTP-редиректу. Также текущая страница не будет сохранена в объекте History (нельзя будет использовать кнопку «Назад»).

Пример перенаправления через 2 секунды на страницу «Благодарности».

Window Location toString()

Пример использования метода toString() :

Пример

Возьмем текущую страницу в качестве примера URL, к которому мы добавим все возможные параметры:

Это разделяется следующим образом:

[https:] // [only-to-top.ru] : [443] [/blog/coding/2019-11-30-javascript-window-location.html] [?name=value] [#hash]

Свойства объекта Window.location касательно данного примера:

[protocol] [hostname] [port] [pathname] [search] [hash]

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

JavaScript — Объект location

На этом уроке мы познакомимся с объектом location , который может использоваться для получения или изменения текущего адреса страницы (URL).

Объект location

Объект location — это один из дочерних объектов window , который отвечает за адресную строку окна или вкладки браузера. Доступ к данному объекту осуществляется как к свойству объекта window , т.е. через точку.

Объект location содержит свойства и методы, с помощью которых Вы можете не только получить текущий адрес страницы (URL или его части: имя хоста, номер порта, протокол и т.д.), но и изменить его.

Свойства объекта location

Свойства объекта location :

• hash — устанавливает или возвращает якорную часть (#) URL;
• host — устанавливает или возвращает имя хоста и номер порта URL;
• hostname — устанавливает или возвращает имя хоста URL;
• href — устанавливает или возвращает содержимое URL;
• origin — возвращает протокол, имя хоста и номер порта URL;
• pathname — устанавливает или возвращает часть URL, содержащей путь;
• port — устанавливает или возвращает номер порта URL;
• protocol — устанавливает или возвращает протокол URL;
• search — устанавливает или возвращает часть URL, содержащей строку с параметрами (?параметр1=значение1&параметр2=значение2&. );

В качестве примера рассмотрим следующую адресную строку (URL):

Примечание: Изменение URL или какой либо её части с помощью свойств объекта location приводит к немедленному переходу к этому URL в текущем окне, или в том окне или вкладке браузера, для которого этот объект был вызван.

Например, изменить href на http://itchief.ru для текущего окна:

Например, изменить href для окна с именем myWindow :

Например, вывести на экран все свойства и методы объекта location и их значения для текущей веб-страницы.

Методы объекта location

• assign() — загружает новый документ в текущее окно (вкладку) браузера или в то окно для которого этот метод был вызван.
• reload() — перезагружает текущий документ. Метод reload() имеет один необязательный параметр булевского типа. Если в качестве параметра указать значение true , то страница будет принудительно обновлена с сервера. А если параметр не указывать или использовать в качестве параметра значение false , то браузер может обновить страницу, используя данные своего кэша. Метод reload() «имитирует» нажатие кнопки обновить в браузере.
• replace() — заменяет текущий документ с помощью нового документа, URL которого указан в качестве параметра.

Рассмотрим следующие примеры:

1. При нажатии на ссылку загрузим в 1 фрейм страницу http://nigma.ru/ :

2. Откроем новое окно, в котором будем управлять адресной строкой с помощью методов объекта location :

Window.location

Свойство только для чтения Window.location возвращает объект Location с информацией о текущем расположении документа.

Хотя Window.location представляет собой объект только для чтения Location , вы можете присвоить ему DOMString . Это значит что в большинстве случаев вы можете работать с location как со строкой: location = ‘http://www.example.com’ это синоним для location.href = ‘http://www.example.com’ .

Синтаксис

Примеры

Базовый пример

Пример №1: Переход на новую страницу

Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван location.assign() с изменённым URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.

Пример №2: Принудительная перезагрузка текущей страницы с сервера

Пример №3

Рассмотрим следующий пример, который будет перезагружать страницу используя метод replace() для вставки значения location.pathname в хэш:

Пример №4: Отображение свойств текущего URL в диалоге alert

Пример №5: Отправка строки данных на сервер через изменение свойства search

Текущий URL с добавлением «?Some%20data» отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счёт изменения строки search).

Пример №6: Использование закладок без изменения свойства hash

…тоже самое только с анимированной прокруткой страницы: