狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

作者：keer6

https://juejin.cn/post/7414305106825019402

前言

在項(xiàng)目開(kāi)發(fā)中，點(diǎn)擊支付按鈕后需要發(fā)送支付請(qǐng)求，并在請(qǐng)求完成后的回調(diào)中，經(jīng)過(guò)一系列判斷，符合某種條件下彈出一個(gè)新窗口頁(yè)面。自然想到使用 window.open，但發(fā)現(xiàn)該操作會(huì)被瀏覽器攔截。

分析原因

當(dāng)瀏覽器檢測(cè)到非用戶(hù)操作產(chǎn)生的新彈出窗口時(shí)，會(huì)對(duì)其進(jìn)行阻止，因?yàn)闉g覽器認(rèn)為這可能是廣告，不是用戶(hù)期望的頁(yè)面。

注意： 如果 window.open 是在用戶(hù)觸發(fā)事件（如點(diǎn)擊事件）或頁(yè)面加載時(shí)調(diào)用，則不會(huì)被攔截；而一旦將彈出代碼放入 Ajax 回調(diào)或異步代碼中，可能就會(huì)被攔截。

例如：

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

在這種情況下，可能會(huì)被瀏覽器攔截，導(dǎo)致不必要的問(wèn)題發(fā)生。

解決方案

1. 綁定 window.open 到點(diǎn)擊事件

將打開(kāi)新窗口的代碼綁定到 click 事件回調(diào)中，這樣可以避免大多數(shù)瀏覽器對(duì)彈窗的攔截。

示例：

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

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

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

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

2. 先打開(kāi)空白窗口，后填充 URL

在處理異步操作時(shí)，可以先打開(kāi)一個(gè)空白窗口，待異步請(qǐng)求返回后，再填充 URL。

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

// 設(shè)置新窗口標(biāo)題
newWindow.document.title = '正在跳轉(zhuǎn)...';
newWindow.document.write('加載中...');

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

此方案的體驗(yàn)不太好，因?yàn)樵诋惒秸?qǐng)求期間，新窗口會(huì)顯示空白頁(yè)，用戶(hù)可能會(huì)感到困惑，交互體驗(yàn)不佳。

3. 最優(yōu)解決方案

通過(guò)分析，我們知道瀏覽器會(huì)在一定時(shí)間后阻止彈窗。因此，更多的從業(yè)務(wù)邏輯入手是解決問(wèn)題的關(guān)鍵。

3.1 改為提示用戶(hù)手動(dòng)跳轉(zhuǎn)

當(dāng)異步請(qǐng)求返回 URL 時(shí)，不是直接調(diào)用 window.open，而是彈出一個(gè)提示框，要求用戶(hù)手動(dòng)點(diǎn)擊跳轉(zhuǎn)按鈕，從而規(guī)避瀏覽器的安全策略。

示例：

function openModal(url) {
    // 包含打開(kāi)彈窗事件，以及一個(gè)確認(rèn)或取消按鈕
    // 點(diǎn)擊“確認(rèn)”按鈕時(shí)調(diào)用 window.open(url, '_blank');
    // 點(diǎn)擊“取消”按鈕時(shí)關(guān)閉彈窗
}

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

3.2 提示用戶(hù)當(dāng)窗口被攔截

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

示例：

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

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

此方法可以提供簡(jiǎn)單的提示，也可以結(jié)合 UI 框架，給用戶(hù)提供更友好的交互體驗(yàn)。

3.3 兜底策略

如果不想增加復(fù)雜的交互邏輯或改變流程，同時(shí)又想保證業(yè)務(wù)正常實(shí)現(xiàn)，可以使用兜底策略。

示例：

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

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

總結(jié)

• 直接綁定 window.open 到用戶(hù)事件回調(diào) 是最簡(jiǎn)單的方式，但局限性較大，無(wú)法適應(yīng)復(fù)雜的異步場(chǎng)景。
• 先打開(kāi)空白窗口后填充 URL 可以解決攔截問(wèn)題，但用戶(hù)體驗(yàn)不佳。
• 最優(yōu)方案 是通過(guò)提示用戶(hù)手動(dòng)跳轉(zhuǎn)或檢測(cè) window.open 的返回值并提供兜底策略，從而確保用戶(hù)體驗(yàn)和業(yè)務(wù)邏輯的完整性。