前言
在项目开发中，点击支付按钮后需要发送支付请求，并在请求完成后的回调中，经过一系列判断，符合某种条件下弹出一个新窗口页面。自然想到使用 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;
}
总结
- 直接绑定 window.open 到用户事件回调 是最简单的方式，但局限性较大，无法适应复杂的异步场景。
- 先打开空白窗口后填充 URL 可以解决拦截问题，但用户体验不佳。
- 最优方案 是通过提示用户手动跳转或检测
window.open的返回值并提供兜底策略，从而确保用户体验和业务逻辑的完整性。
