Как открыть ссылку в новой вкладке, а не в новом окне, через JavaScript?

Почему window.open открывает новое окно, а не вкладку?

Проблема, с которой вы столкнулись, очень распространена среди начинающих разработчиков. Дело в том, что поведение метода window.open() зависит от контекста вызова и настроек браузера. Когда вы вызываете window.open(url, '_blank') не в результате прямого действия пользователя (например, внутри асинхронного колбэка или после задержки), современные браузеры блокируют этот вызов как потенциально нежелательное всплывающее окно (pop-up blocker). Они либо полностью блокируют открытие, либо открывают его в новом окне, а не вкладке.

Ключевой момент: браузер должен быть уверен, что открытие новой вкладки инициировано пользователем напрямую — кликом мыши, нажатием клавиши или касанием на мобильном устройстве. Если вызов происходит внутри асинхронной функции (setTimeout, fetch, Promise), браузер считает это "непрямым" действием и применяет блокировку.

Правильное решение: прямая обработка события

Самый надёжный способ — открывать новую вкладку синхронно внутри обработчика события, которое происходит непосредственно от пользователя. Вот как это сделать правильно:

// HTML
<button id="myButton">Открыть сайт</button>

// JavaScript
document.getElementById('myButton').addEventListener('click', function() {
    window.open('https://example.com', '_blank');
});

Этот код будет работать корректно, потому что window.open вызывается прямо внутри обработчика клика. Браузер видит, что пользователь кликнул, и доверяет этому действию.

Что делать, если URL формируется асинхронно?

Частая ситуация: нужно сначала получить URL от сервера (через fetch или XMLHttpRequest), а потом открыть его. Простое решение — сохранить намерение пользователя открыть новую вкладку, а потом выполнить открытие в правильный момент.

// Решение с сохранением контекста
document.getElementById('fetchButton').addEventListener('click', function() {
    // 1. Сразу открываем пустую вкладку
    const newTab = window.open('', '_blank');
    
    // 2. Асинхронно получаем URL
    fetch('/api/get-url')
        .then(response => response.json())
        .then(data => {
            // 3. Перенаправляем уже открытую вкладку
            newTab.location.href = data.url;
        })
        .catch(error => {
            // 4. Если ошибка — закрываем вкладку
            newTab.close();
            console.error('Ошибка получения URL:', error);
        });
});

Как это работает:

• Сначала мы открываем пустую вкладку (window.open('', '_blank')) — это разрешено, так как происходит по клику.
• Потом асинхронно получаем реальный URL.
• Когда URL получен, мы меняем адрес уже открытой вкладки через newTab.location.href.
• Если произошла ошибка — закрываем пустую вкладку, чтобы не оставлять пользователя с пустым экраном.

Альтернатива: использование HTML-ссылки с динамическим href

Если вам не нужно выполнять сложную логику перед открытием, можно создать программно элемент <a> и "кликнуть" по нему. Это тоже считается прямым действием пользователя:

function openInNewTab(url) {
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    // Важно: добавляем rel="noopener noreferrer" для безопасности
    link.rel = 'noopener noreferrer';
    link.click();
}

// Использование:
document.getElementById('myButton').addEventListener('click', function() {
    openInNewTab('https://example.com');
});

Важно про безопасность: при использовании target="_blank" всегда добавляйте rel="noopener noreferrer". Это защитит вашу страницу от потенциальной атаки через window.opener и улучшит производительность.

Почему не стоит использовать window.open без необходимости?

Метод window.open даёт больше контроля (можно указать размеры окна, позицию), но:

• Он может быть заблокирован браузером, если используется неправильно.
• Он даёт доступ к открытому окну через window.opener, что может быть небезопасно.
• Современные браузеры всё чаще открывают новые окна как вкладки, если не указаны явные размеры.

В большинстве случаев для открытия ссылки в новой вкладке достаточно простого <a href="..." target="_blank"> в HTML или создания такого элемента через JavaScript.

function openUrlInNewTab(url) {
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    link.rel = 'noopener noreferrer';
    
    // Создаём событие мыши, которое браузер воспримет как "пользовательское"
    const clickEvent = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        button: 0 // левая кнопка мыши
    });
    
    link.dispatchEvent(clickEvent);
}