Открытие ссылки в новой вкладке при нажатии кнопки в JavaScript

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

Использование атрибута target

В HTML есть атрибут target, который можно использовать для открытия ссылки в новой вкладке. Этот атрибут принимает следующие значения:

• _self – открывает ссылку в текущей вкладке,
• _blank – открывает ссылку в новой вкладке.

Чтобы использовать это в JavaScript, мы можем добавить атрибут target в элемент a, который является ссылкой:

<a href="https://google.com" target="_blank">Google</a>

Создание ссылки вновь созданной вкладке

Теперь представьте, что ссылки на кнопки генерируются динамически из JavaScript. Для создания ссылки на новый окна, нам нужно воспользоваться функцией window.open(). Она открывает новое окно браузера и возвращает объект Window, который может использоваться для управления этим окном.

let button = document.getElementById("button");
button.addEventListener("click", function() {
  window.open("https://google.com");
});

Этот код создает кнопку с id button и добавляет ей обработчик событий, который открывает новое окно браузера с помощью функции window.open().

Опции для открытия новой вкладки

Функция window.open() принимает несколько параметров, которые позволяют указать, как открывать новое окно. Вот некоторые из них:

• url – URL-адрес страницы, которую нужно открыть.
• name – имя нового окна. Может быть использовано для ссылки на него из другого окна.
• width и height – ширина и высота нового окна в пикселях.
• left и top – координаты левого верхнего угла нового окна в пикселях.
• menubar, toolbar, location, status, resizable, scrollbars – параметры отображения панелей браузера в новой вкладке.

Вот пример кода с использованием параметров, чтобы открыть ссылку в новой вкладке со свернутыми панелями браузера и заданными размерами:

let button = document.getElementById("button");
button.addEventListener("click", function() {
  window.open("https://google.com", "Google", "width=800,height=600,resizable=no,scrollbars=no,status=no");
});

Итоги

В этой статье мы рассмотрели несколько способов открытия ссылки в новой вкладке с помощью JavaScript. Для статических ссылок HTML-атрибут target – простейший и удобный способ. Если ссылки генерируются динамически, то функция window.open() позволяет управлять параметрами создаваемого окна.

Теперь вы знаете, как легко открывать ссылки в новых вкладках при нажатии на кнопки в JavaScript.