window.open 被浏览器拦截解决方案

前言

在项目开发中，点击支付按钮后需要发送支付请求，并在请求完成后的回调中，经过一系列判断，符合某种条件下弹出一个新窗口页面。自然想到使用 window.open，但发现该操作会被浏览器拦截。

分析原因

当浏览器检测到非用户操作产生的新弹出窗口时，会对其进行阻止，因为浏览器认为这可能是广告，不是用户期望的页面。

注意： 如果 window.open 是在用户触发事件（如点击事件）或页面加载时调用，则不会被拦截；而一旦将弹出代码放入 Ajax 回调或异步代码中，可能就会被拦截。

例如：

javascript 复制代码

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

在这种情况下，可能会被浏览器拦截，导致不必要的问题发生。

解决方案

1. 绑定 `window.open` 到点击事件

将打开新窗口的代码绑定到 click 事件回调中，这样可以避免大多数浏览器对弹窗的拦截。

示例：

javascript 复制代码

// 获取按钮元素
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。

javascript 复制代码

// 先打开新的空白窗口
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，而是弹出一个提示框，要求用户手动点击跳转按钮，从而规避浏览器的安全策略。

示例：

javascript 复制代码

function openModal(url) {
    // 包含打开弹窗事件，以及一个确认或取消按钮
    // 点击"确认"按钮时调用 window.open(url, '_blank');
    // 点击"取消"按钮时关闭弹窗
}

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

3.2 提示用户当窗口被拦截

window.open() 会返回一个 Window 对象的引用，如果窗口被拦截，则返回 null，利用这一特性可以给出提示信息。

示例：

javascript 复制代码

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

if (!newWindow) {
    alert('页面跳转已被浏览器拦截');
}

此方法可以提供简单的提示，也可以结合 UI 框架，给用户提供更友好的交互体验。

3.3 兜底策略

如果不想增加复杂的交互逻辑或改变流程，同时又想保证业务正常实现，可以使用兜底策略。

示例：

javascript 复制代码

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

if (newWindow) {
    // 如果窗口成功打开，确保新窗口获得焦点
    newWindow.focus();
} else {
    // 如果窗口被拦截，则直接在当前页面跳转
    window.location.href = redirectUrl;
}

总结

直接绑定 window.open 到用户事件回调 是最简单的方式，但局限性较大，无法适应复杂的异步场景。
先打开空白窗口后填充 URL 可以解决拦截问题，但用户体验不佳。
最优方案 是通过提示用户手动跳转或检测 window.open 的返回值并提供兜底策略，从而确保用户体验和业务逻辑的完整性。

window.open 被浏览器拦截解决方案

前言

分析原因

解决方案

1. 绑定 window.open 到点击事件

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

3. 最优解决方案

3.1 改为提示用户手动跳转

3.2 提示用户当窗口被拦截

3.3 兜底策略

总结

1. 绑定 `window.open` 到点击事件