window.open新標籤頁被攔截？異步調用與參數配置的雙重陷阱

現象：本想新標籤，卻彈出新窗口/被攔截

// 異步Ajax回調中調用
$.ajax({
    url: '/check',
    success: function(data) {
        if (data.allow) {
            window.open('/target'); // 被攔截或新窗口
        }
    }
});

核心原因雙重奏

1. 異步調用失去「用戶手勢」信任

瀏覽器安全策略：只有用戶直接交互事件（click/keydown等）觸發的window.open才被視為可信。Ajax回調屬於異步任務，調用棧斷裂，瀏覽器判定為「腳本主動彈窗」→ 攔截或強制新窗口。

2. 第二參數寫了尺寸就變「彈出窗口」

window.open(url, '_blank', 'width=800,height=600'); // ✅ 明確要求彈出窗口
window.open(url, '_blank'); // ✅ 瀏覽器決策：現代多為新標籤
window.open(url); // ⚠️ 同 _blank，但舊瀏覽器可能新窗口

三種解決方案

方案一：同步請求（不推薦，阻塞UI）

$.ajax({
    url: '/check',
    async: false, // 同步
    success: function(data) {
        if (data.allow) window.open('/target');
    }
});

方案二：預先打開窗口引用，回調修改location（推薦）

// 用戶點擊瞬間打開空白頁
var win = window.open('', '_blank'); 
// 立即獲得window引用，不被攔截

$.ajax({
    url: '/check',
    success: function(data) {
        if (data.allow) win.location.href = '/target';
        else { win.close(); alert('無權限'); }
    }
});

方案三：表單提交觸發新標籤（無JS攔截）

function openChecked(url) {
    var form = document.createElement('form');
    form.method = 'GET';
    form.action = url;
    form.target = '_blank';
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

// 用戶點擊綁定
btn.onclick = function() {
    // 這裡可以先同步檢查或直接提交
    // 後端驗證失敗返回錯誤頁
    openChecked('/target'); 
};

最佳實踐總結

• ✅ 用戶點擊事件中直接window.open(url, '_blank')
• ✅ 需異步判斷時，先開窗口留引用，回調修改location.href
• ❌ 異步回調中直接window.open
• ❌ 傳遞第三參數features（除非確要彈出窗口）