JavaScript中如何实现点击新标签页跳转返回上一个浏览窗口？

分同域、跨域两种场景处理，以下是可直接复用的实现逻辑：

同域场景（原页面和视频页面属于同一个域名） #

这是兼容性最好的场景，可实现关闭当前视频标签页+自动切回原标签页的完整效果：

• 原页面跳转逻辑调整：给打开视频的链接加专属标识参数，方便新页面识别来源，示例a标签代码：

<a href="你的视频页面地址?from=origin" target="_blank">
  <img src="视频封面地址" alt="视频封面">
</a>

• 视频页面添加点击监听逻辑：

// 校验原页面未关闭、且是从指定跳转链路过来的
if (window.opener && !window.opener.closed && new URLSearchParams(window.location.search).get('from') === 'origin') {
  // 监听页面点击事件，可根据需求把绑定对象从document改成具体的视频元素
  document.addEventListener('click', () => {
    // 给原标签页聚焦，自动切回原标签
    window.opener.focus();
    // 可选：需要关闭当前视频标签页就保留下面这行，不需要可以删除
    window.close();
  })
}

跨域场景（原页面和视频页面不属于同一个域名） #

受浏览器同源策略限制，无法直接操作原标签页的焦点，可使用降级方案：

document.addEventListener('click', () => {
  // 直接回退到上一级历史记录，前提是用户是从原页面直接跳转过来没有中间跳转
  window.history.back();
})

注意：跨域场景下无法做到自动切回原标签页，只能实现当前视频标签页跳转回原页面地址。

常见问题说明 #

• 只有在用户主动触发的回调（比如点击事件）里调用focus()才不会被浏览器安全策略拦截，上述代码符合浏览器规则不会被拦截
• 如果原页面已经被用户手动关闭，window.opener.closed会返回true，逻辑自动终止不会报错
• 如果需要限制只有点击视频区域才触发跳转，把点击事件绑定到video元素/视频容器元素即可，不用绑定整个document

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