前言

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

分析原因

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

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

例如：

复制 1async function handleJump() {
 2    let url = await getData();
 3    
 4    if (url) {
 5        window.open(url, '_blank');
 6    }
 7}

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

解决方案

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

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

示例：

复制 1
 2var button = document.getElementById('openWindowBtn');
 3
 4
 5button.addEventListener('click', function () {
 6    
 7    var newWindow = window.open('https://www.example.com', 'newWindow', 'width=800,height=600');
 8
 9    
10    if (newWindow) {
11        console.log('新窗口已成功打开');
12    } else {
13        console.log('未能打开新窗口，可能被浏览器拦截');
14    }
15});

这种方式有效，但有局限性。在处理异步操作时，无法避免拦截问题，因此需要其他解决方案。

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

在处理异步操作时，可以先打开一个空白窗口，待异步请求返回后，再填充 URL。

复制 1
 2const newWindow = window.open('about:blank', '_blank');
 3
 4
 5newWindow.document.title = '正在跳转...';
 6newWindow.document.write('加载中...');
 7
 8try {
 9    
10    newWindow.location.href = await getUrl();
11} catch (error) {
12    newWindow.close();
13    alert('打开新窗口失败');
14}

此方案的体验不太好，因为在异步请求期间，新窗口会显示空白页，用户可能会感到困惑，交互体验不佳。

3. 最优解决方案

通过分析，我们知道浏览器会在一定时间后阻止弹窗。因此，更多的从业务逻辑入手是解决问题的关键。

3.1 改为提示用户手动跳转

当异步请求返回 URL 时，不是直接调用 window.open，而是弹出一个提示框，要求用户手动点击跳转按钮，从而规避浏览器的安全策略。

示例：

复制 1function openModal(url) {
 2    
 3    
 4    
 5}
 6
 7async function handleJump() {
 8    let url = await getData();
 9    
10    openModal(url);
11}

3.2 提示用户当窗口被拦截

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

示例：

复制 1const newWindow = window.open('https://www.mozilla.org/', '_blank');
 2
 3if (!newWindow) {
 4    alert('页面跳转已被浏览器拦截');
 5}

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

3.3 兜底策略

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

示例：

复制 1const newWindow = window.open(redirectUrl, '_blank');
 2
 3if (newWindow) {
 4    
 5    newWindow.focus();
 6} else {
 7    
 8    window.location.href = redirectUrl;
 9}

总结

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