点击按钮时新标签页打开页面并重定向原页面的跨浏览器解决方案

我完全懂你这种头疼的感觉——Firefox里运行顺畅的逻辑，到Chrome就直接失效，浏览器的安全差异真的很磨人。咱们来拆解问题，给出Chrome兼容的解决方案：

问题根源 #

Chrome对非用户直接触发的弹窗/新标签页有严格的拦截机制。如果你的window.open是在异步回调、延迟操作，或者脱离了用户点击的同步上下文里执行，Chrome会直接拦截它。而Firefox的安全限制相对宽松，所以能正常运行。

方案1：纯同步触发（最稳妥的原生实现） #

只要把两个操作都放在用户点击的同步回调函数里执行，Chrome就会认定这是用户主动触发的操作，不会拦截新标签页。

示例代码：

<button id="actionBtn">执行双操作</button>

<script>
document.getElementById('actionBtn').addEventListener('click', function() {
  // 1. 先打开新标签页（必须在同步回调内执行）
  const newTab = window.open('https://你的新页面地址.com', '_blank');
  
  // 2. 立即重定向原页面
  window.location.href = 'https://原页面跳转目标.com';
  
  // 额外容错：如果极端情况被拦截，提示用户
  if (!newTab || newTab.closed || typeof newTab.closed === 'undefined') {
    alert('新标签页被浏览器拦截，请检查弹窗权限设置');
  }
});
</script>

方案2：包含异步操作的场景 #

如果必须先完成异步任务（比如请求接口验证、获取数据）再执行跳转，那得先在用户点击的同步阶段打开一个空白标签页，等异步完成后再给这个标签页赋值目标URL：

示例代码：

<button id="asyncActionBtn">异步后执行双操作</button>

<script>
document.getElementById('asyncActionBtn').addEventListener('click', async function() {
  // 1. 同步阶段打开空白标签页（Chrome允许用户直接触发的空白页）
  const newTab = window.open('about:blank', '_blank');
  
  try {
    // 2. 执行你的异步任务，比如接口请求
    await fetch('/api/verify-user');
    
    // 3. 给空白标签页设置目标地址
    newTab.location.href = 'https://你的新页面地址.com';
    
    // 4. 重定向原页面
    window.location.href = 'https://原页面跳转目标.com';
  } catch (error) {
    // 异步失败时关闭空白页并提示
    newTab.close();
    alert('操作失败，请稍后重试');
  }
});
</script>

关键注意事项 #

• 绝对不要用setTimeout（哪怕延迟0ms）包裹window.open，Chrome会把它判定为异步触发，直接拦截。
• 如果用React/Vue等框架，确保事件处理函数是同步执行的，或者沿用上述异步场景的空白页方案。
• 避免多层事件代理导致失去“用户直接交互”的上下文，尽量直接绑定按钮的点击事件。

内容的提问来源于stack exchange，提问作者Tilen Piskule