При создании веб-страниц часто желательно, чтобы ссылки открывались в новой вкладке или окне браузера. Это позволяет пользователям легко вернуться на исходную страницу, не теряя своего места. В этой статье мы рассмотрим различные методы достижения этой функциональности на примерах HTML-кода.
Метод 1: целевой атрибут
HTML предоставляет атрибут target, который можно использовать для указания места открытия связанного контента. Чтобы открыть ссылку в новой вкладке, используйте значение «_blank» для целевого атрибута.
<a href="https://example.com" target="_blank">Open link in new tab</a>Метод 2: JavaScript – window.open()
JavaScript предоставляет метод window.open(), который позволяет программно открывать новое окно браузера или вкладку. Вызывая этот метод при нажатии ссылки, вы можете добиться желаемого поведения.
<a href="https://example.com" onclick="window.open(this.href); return false;">Open link in new tab</a>Метод 3: JavaScript — прослушиватель событий
Другой подход JavaScript — добавить прослушиватель событий к элементу ссылки и обрабатывать событие щелчка. В обработчике событий вы можете использовать метод window.open(), чтобы открыть ссылку на новой вкладке.
<a href="https://example.com" id="myLink">Open link in new tab</a>
<script>
var link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
event.preventDefault();
window.open(link.href);
});
</script>Метод 4: атрибут rel=”noopener noreferrer”
При использовании атрибута target="_blank"рекомендуется включать атрибут rel="noopener noreferrer". Это обеспечивает преимущества в плане безопасности и предотвращает потенциальные уязвимости.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open link in new tab</a>Метод 5: использование CSS
CSS также можно использовать для открытия ссылок на новых вкладках. Применяя свойство target-newк элементу ссылки, вы можете указать, что ссылка должна открываться в новой вкладке.
<style>
a.new-tab {
target-new: tab;
}
</style>
<a href="https://example.com" class="new-tab">Open link in new tab</a>Открытие ссылок в новых вкладках или окнах может улучшить взаимодействие с пользователем и улучшить навигацию по сайту. В этой статье мы рассмотрели несколько методов достижения этой функциональности с использованием HTML и JavaScript. Предпочитаете ли вы использовать атрибуты HTML, функции JavaScript или свойства CSS, вы можете выбрать метод, который лучше всего соответствует вашим потребностям.