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

前言

在项目开发中，点击支付按钮后需要发送支付请求，并在请求完成后的回调中，经过一系列判断，符合某种条件下弹出一个新窗口页面。自然想到使用 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 {// 异步请求返回后填充 URLnewWindow.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;
}