Windows location href открыть в новой вкладке

Ищешь данные 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

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

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’

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

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’

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

Этот метод возвращает 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

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

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

assign

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

replace

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

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. Вернемся на 👉 чистую страницу

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

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’);

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

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

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

1

1

window.open — метод; вы можете открыть новое окно и настроить его.
window.location.href — это просто свойство текущего окна.

window.open () откроет новое окно, а window.location.href откроет новый URL-адрес в текущем окне.

Ещё вопросы

• 1localhost: 8080 / lio / отлично работает в моем apachtomcat. но когда я ставлю <мой IP>: 8080 / lio / я получаю ошибку
• 0ошибка при применении вида фильтрации во временной области
• 0Как заставить объект PHP возвращать не-строку?
• 0Вызовите функцию jquery из html для разбора
• 0Скрыть всю таблицу, когда тд
• 0SFML — расчет сна
• 0AngularJS — Использование typeahead с ngTagsInput
• 0проблема при установке старой библиотеки 2005 BOOST
• 0Перенаправление на определенную веб-страницу после того, как пользователи выбирают из выпадающего меню форму и php
• 0Какой может быть лучший подход для хранения 2D массива объектов?
• 0Переход от строки к массиву в AngularJS
• 0Как я могу объединить строку параметра в функции javascript на строку в добавленном HTML?
• 0Как получить топ класс из базового класса
• 1Десериализация списка элементов с аннотацией @Text в Simple
• 1Android: HttpClient POST: NullPointerException
• 1Формат даты и времени / Шаблоны в классе Java / SimpleDateFormat
• 0PHP открывает файл в кодировке Unicode с другой страницы
• 1C # 5.0 в двух словах
• 0вычисление коэффициентов w для фильтра iir
• 1Сбой pytest: не удается найти запрошенный URL
• 1Удалить жесты из RatingBar
• 0Загрузка дополнительных сообщений не работает
• 1Хранение чрезвычайно больших массивов
• 0Как отправить динамически созданные входные (или текстовые) значения в iframe и показать его как HTML внутри iframe?
• 1Как закрыть обработчик событий?
• 0CSS: недискретная минимальная высота по отношению к родителю, но также может расширить родительский
• 0MYSQL определяет приоритетность записи, выбранной GROUP BY
• 1Регулярное выражение для сопоставления 3 или 4 выражений части с разделителями пробела и пробела
• 0MIN / MAX работает в JPA Spring Data с Amazon Aurora DB (запрос наибольшего числа групп)
• 1Python, инициализировать атрибут класса в цикле
• 0AngularJS $ компилировать с помощью jQuery clone ()
• 0Нечеткое совпадение даты
• 0opencart получить общую цену в корзине при выбранном способе оплаты
• 1создать наследовать переопределить ODOO
• 0JQuery / JS для цикла, добавление переменной с другим конечным номером для разделения Div
• 1D3 js длина ссылки между узлами изображения
• 0Список функциональности c ++
• 1Android — Настройка обнаружения коллизий растровых изображений после поворота по матрице
• 0Разработка текстового редактора на PHP
• 0Класс Wrapper для type_info
• 1RallyRestApi.dll не распознает объект RallyRestApi
• 0Как должны быть подготовлены данные для параметризованных тестов?
• 0$ ionicHistory.clearHistory очищает историю, но переходит к предыдущему представлению, когда hardwareBackButton нажал на Android?
• 0Добавить разделы в существующую таблицу на основе текущей даты
• 0Вопрос специализации шаблона Alias?
• 1Абсолютное центрирование в макете Android
• 1Питон Панды | Создайте отдельные списки для каждого из столбцов
• 1Как передать ресурс изображения из моего приложения в другое?
• 0Низкий TPS при использовании Virtualbox + Ubuntu + Nginx + PHP-FPM + Silex
• 0Бесконечный цикл с обработкой файлов и istringstreams

<script>
  let newWindow;
  function openWindow() {
    if (!newWindow) {
      newWindow = window.open('https://itchief.ru/', '', 'width=400,height=500');
      newWindow.focus();
    } else {
      newWindow.focus();
    }
  }
  function assignWindow() {
    if (newWindow) {
      newWindow.location.assign('https://itchief.ru/javascript/');
      newWindow.focus();
    }
  }
  function replaceWindow() {
    if (newWindow) {
      newWindow.location.replace('https://itchief.ru/html-and-css/');
      newWindow.focus();
    }
  }
</script>

<ul>
  <li><a href="javascript:openWindow()">Создать окно «https://itchief.ru/»</a></li>
  <li><a href="javascript:assignWindow()">Загрузить «https://itchief.ru/javascript/»</a></li>
  <li><a href="javascript:replaceWindow()">Заменим страницу на «https://itchief.ru/html-and-css/»</a></li>
</ul>