作者：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 的返回值并提供兜底策略，从而确保用户体验和业务逻辑的完整性。