作者：keer6

https://juejin.cn/post/7414305106825019402

前言

在項目開發中，點擊支付按鈕后需要發送支付請求，并在請求完成后的回調中，經過一系列判斷，符合某種條件下彈出一個新窗口頁面。自然想到使用 window.open，但發現該操作會被瀏覽器攔截。

分析原因

當瀏覽器檢測到非用戶操作產生的新彈出窗口時，會對其進行阻止，因為瀏覽器認為這可能是廣告，不是用戶期望的頁面。

注意： 如果 window.open 是在用戶觸發事件（如點擊事件）或頁面加載時調用，則不會被攔截；而一旦將彈出代碼放入 Ajax 回調或異步代碼中，可能就會被攔截。

例如：

async function handleJump() {
    let url = await getData();
    // 5 秒后
    if (url) {
        window.open(url, '_blank');
    }
}

在這種情況下，可能會被瀏覽器攔截，導致不必要的問題發生。

解決方案

1. 綁定 window.open 到點擊事件

將打開新窗口的代碼綁定到 click 事件回調中，這樣可以避免大多數瀏覽器對彈窗的攔截。

示例：

// 獲取按鈕元素
var button = document.getElementById('openWindowBtn');

// 添加點擊事件監聽器
button.addEventListener('click', function () {
    // 在點擊事件中打開新窗口
    var newWindow = window.open('https://www.example.com', 'newWindow', 'width=800,height=600');

    // 檢查窗口是否成功打開
    if (newWindow) {
        console.log('新窗口已成功打開');
    } else {
        console.log('未能打開新窗口，可能被瀏覽器攔截');
    }
});

這種方式有效，但有局限性。在處理異步操作時，無法避免攔截問題，因此需要其他解決方案。

2. 先打開空白窗口，后填充 URL

在處理異步操作時，可以先打開一個空白窗口，待異步請求返回后，再填充 URL。

// 先打開新的空白窗口
const newWindow = window.open('about:blank', '_blank');

// 設置新窗口標題
newWindow.document.title = '正在跳轉...';
newWindow.document.write('加載中...');

try {
    // 異步請求返回后填充 URL
    newWindow.location.href = await getUrl();
} catch (error) {
    newWindow.close();
    alert('打開新窗口失敗');
}

此方案的體驗不太好，因為在異步請求期間，新窗口會顯示空白頁，用戶可能會感到困惑，交互體驗不佳。

3. 最優解決方案

通過分析，我們知道瀏覽器會在一定時間后阻止彈窗。因此，更多的從業務邏輯入手是解決問題的關鍵。

3.1 改為提示用戶手動跳轉

當異步請求返回 URL 時，不是直接調用 window.open，而是彈出一個提示框，要求用戶手動點擊跳轉按鈕，從而規避瀏覽器的安全策略。

示例：

function openModal(url) {
    // 包含打開彈窗事件，以及一個確認或取消按鈕
    // 點擊“確認”按鈕時調用 window.open(url, '_blank');
    // 點擊“取消”按鈕時關閉彈窗
}

async function handleJump() {
    let url = await getData();
    // 異步操作完成后彈出提示框
    openModal(url);
}

3.2 提示用戶當窗口被攔截

window.open() 會返回一個 Window 對象的引用，如果窗口被攔截，則返回 null，利用這一特性可以給出提示信息。

示例：

const newWindow = window.open('https://www.mozilla.org/', '_blank');

if (!newWindow) {
    alert('頁面跳轉已被瀏覽器攔截');
}

此方法可以提供簡單的提示，也可以結合 UI 框架，給用戶提供更友好的交互體驗。

3.3 兜底策略

如果不想增加復雜的交互邏輯或改變流程，同時又想保證業務正常實現，可以使用兜底策略。

示例：

const newWindow = window.open(redirectUrl, '_blank');

if (newWindow) {
    // 如果窗口成功打開，確保新窗口獲得焦點
    newWindow.focus();
} else {
    // 如果窗口被攔截，則直接在當前頁面跳轉
    window.location.href = redirectUrl;
}

總結

• 直接綁定 window.open 到用戶事件回調 是最簡單的方式，但局限性較大，無法適應復雜的異步場景。
• 先打開空白窗口后填充 URL 可以解決攔截問題，但用戶體驗不佳。
• 最優方案 是通過提示用戶手動跳轉或檢測 window.open 的返回值并提供兜底策略，從而確保用戶體驗和業務邏輯的完整性。