window

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

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

Наши соц. сети: instagram, fb, tg

Ищешь данные 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
Returns
.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. Посмотрим, что я имею в виду.


// START 'voiti-v-it.com'

window.location.pathname = '/posts'; // Set the pathname

// RESULT 'voiti-v-it.com/posts'

Вот полный список свойств, которые ты можешь изменить:


// Example
window.location.protocol = 'https'
    .host     = 'localhost:8080'
    .hostname = 'localhost'
    .port     = '8080'
    .pathname = 'path'
    .search   = 'query string' // (тебе не нужно добавлять ?)
    .hash     = 'hash' // (тебе не нужно добавлять #)
    .href     = 'url'

Единственное свойство, которое ты не можешь установить, это window.location.origin. Это свойство доступно только для чтения.

Объект Location

window.location возвращает объект Location, который дает тебе информацию о текущем местоположении страницы. Ты также можешь получить доступ к объекту Location несколькими способами.


window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location

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

location

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

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

JSPerf: Location toString vs Location href

Один момент, который я хочу отметить в отношении этих тестов скорости, заключается в том, что они зависят от браузера. Различные браузеры и версии будут иметь разные результаты. Я использую 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 быстрее. Опять же, тесты производительности варьируются в зависимости от браузера и разных версий, сейчас это может быть быстрее, но, возможно, в будущих браузерах всё может измениться.

JSPerf: href vs assign

Утолим жажду 👍

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