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

Проблема с window.open() и блокировкой всплывающих окон

Вы столкнулись с классической проблемой: браузеры блокируют вызов window.open(), если он происходит не в результате прямого действия пользователя (например, клика). Это сделано для защиты от назойливой рекламы. Однако есть несколько надёжных способов решить вашу задачу.

Способ 1: Использование тега <a> с target="_blank" (рекомендуемый)

Самый простой и надёжный способ — создать невидимую ссылку и программно "кликнуть" по ней. Этот метод не блокируется браузерами, так как имитирует прямое действие пользователя.

function openInNewTab(url) {
    const anchor = document.createElement('a');
    anchor.href = url;
    anchor.target = '_blank';
    anchor.rel = 'noopener noreferrer'; // Важно для безопасности
    anchor.style.display = 'none'; // Скрываем элемент
    document.body.appendChild(anchor);
    anchor.click();
    document.body.removeChild(anchor); // Убираем элемент после клика
}

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

Способ 2: Правильное использование window.open()

Если вы всё же хотите использовать window.open(), убедитесь, что вызов происходит синхронно в обработчике события клика. Никаких setTimeout, асинхронных запросов или промисов до вызова!

document.getElementById('myButton').addEventListener('click', function() {
    // Правильно: вызов сразу в обработчике
    const url = 'https://example.com/some-page';
    const newWindow = window.open(url, '_blank');
    
    if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
        // Если окно было заблокировано
        alert('Пожалуйста, разрешите всплывающие окна для этого сайта');
    }
});

Важно: Если URL формируется асинхронно, сначала откройте пустое окно, а потом задайте ему URL:

document.getElementById('myButton').addEventListener('click', function() {
    const newWindow = window.open('', '_blank'); // Открываем пустое окно сразу
    
    // Теперь можно делать асинхронные операции
    fetch('/api/get-url')
        .then(response => response.json())
        .then(data => {
            newWindow.location.href = data.url; // Задаём URL после загрузки
        });
});

Способ 3: Использование rel="noopener noreferrer"

При использовании window.open() всегда добавляйте атрибуты безопасности, особенно если ссылка ведёт на внешний ресурс:

const newWindow = window.open(url, '_blank', 'noopener,noreferrer');

Это защитит вашу страницу от потенциальных атак через window.opener.

Что выбрать?

• Для простых случаев — используйте первый способ с созданием скрытой ссылки. Он гарантированно работает во всех браузерах.
• Для асинхронных сценариев — комбинируйте: сначала откройте пустое окно через window.open() в обработчике клика, потом задайте URL.
• Всегда проверяйте, не заблокировало ли браузер открытие окна, и предупреждайте пользователя.

Помните: ни один из методов не сработает, если пользователь отключил JavaScript. Для таких случаев всегда дублируйте функциональность обычными HTML-ссылками.

function openInNewTabViaForm(url) {
    const form = document.createElement('form');
    form.action = url;
    form.method = 'GET';
    form.target = '_blank';
    form.style.display = 'none';
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

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

function safeOpenInNewTab(url) {
    const testWindow = window.open('about:blank', '_blank');
    if (testWindow) {
        testWindow.location.href = url;
    } else {
        // Если окно заблокировано, предложите пользователю открыть ссылку вручную
        alert('Не удалось открыть новую вкладку. Пожалуйста, разрешите всплывающие окна или используйте Ctrl+Click');
    }
}