作者：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 的返回值并提供兜底策略，從而確保用戶體驗和業務邏輯的完整性。
該文章在 2025/1/14 12:49:43 編輯過
400 186 1886
