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