Открыть ссылку в новой вкладке HTML: решение с помощью button

Быстрый ответ

Для того чтобы веб-страница открывалась в новом окне браузера с помощью HTML-кнопки, используйте атрибут onclick вместе с функцией window.open():

<button onclick="window.open('https://www.example.com', '_blank')">Открыть в новом окне</button>

Убедитесь, что указали URL-адрес в качестве первого аргумента функции window.open() и '_blank' как второй аргумент. Это позволит открыть ссылку в новой вкладке.

Решения для разнообразных ситуаций

В сфере HTML есть множество решений для различных задач. Давайте рассмотрим наиболее значимые из них:

Использование якоря для обеспечения универсальности в браузерах

Для гарантированно одинакового поведения в разных браузерах стоит использовать кнопку внутри якорного тега <a>:

<a href="https://www.example.com" target="_blank">
  <button type="button">Открыть в новом окне</button>
</a>

Такой подход объединяет функциональность браузера по открытию ссылок в новом окне и элемент кнопки.

Подробнее об этом расскажет наш спикер на видео

Использование форм для доступа к ссылкам

Семантичным способом открытия ссылок в новом окне является использование форм с атрибутом target="_blank":

<form action="https://www.example.com" target="_blank" method="get">
  <button type="submit">Открыть в новом окне</button>
</form>

Этот метод подходит преимущественно для отправки данных формы, в соответствии с ее основным назначением.

Предотвращение стандартного поведения

Добавление return false после вызова window.open() в атрибуте onclick блокирует стандартное поведение кнопки:

<button onclick="window.open('https://www.example.com', '_blank'); return false;">Открыть в новом окне</button>

Учет пользовательского опыта

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

Визуализация

Пример визуализации, где дом представляет текущий контекст, а звонок – действие пользователя:

Обычная ссылка:      [🔔] -> Открывает дверь в текущей комнате 🏠
Ссылка для новой вкладки:  [🔔🆕] -> Переносит вас в новую реальность 🌍

HTML-кнопка функционирует как средство перемещения:

<button onclick="window.open('http://example.com', '_blank');">
  Нажмите кнопку, чтобы переместиться
</button>

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

Когда использование _blank может оказаться неуместным

Несмотря на пользу, которую приносит _blank, его чрезмерное использование может ухудшить пользовательский опыт из-за избыточного количества открытых вкладок. Важно избегать необоснованного использования этого функционала, чтобы не создавать проблемы с производительностью.

Альтернативы без использования JavaScript

Если использование JavaScript недоступно, вы можете использовать атрибут download в HTML5 для загрузки ресурсов в новом окне:

<a href="https://www.example.com/document.pdf" download>
  Скачать документ
</a>

Контроль доступности

Рекомендуется добавлять атрибут rel="noopener noreferrer" к элементам с атрибутом target="_blank" для повышения безопасности и доступности:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Перейти на Example
</a>

Полезные материалы

1. Атрибут target в теге a на W3Schools — Подробная информация о том, как использовать атрибут 'target' для открытия ссылок в новой вкладке.
2. Элемент Anchor – MDN — Исчерпывающее описание якорного тега и его атрибутов на сайте Mozilla Developer Network.
3. Can I Use... — База данных, содержащая информацию о поддержке различных элементов HTML5 в браузерах.
4. Руководство по использованию ARIA — Тут описаны лучшие практики по созданию доступных ссылок с атрибутом 'target="_blank"'.
5. WebAIM: Архив обсуждений по электронной почте — Обсуждение проблем доступности, связанных с открытием ссылок в новых вкладках.