纯Javascript无需Chrome扩展如何判断window.open打开的标签页是否打开？

核心前提结论 #

受浏览器同源策略限制，纯JS实现能力分两种场景：

• 你打开的目标标签页和当前页面同源（同协议、同域名、同端口），可以完整实现两类判断需求
• 你打开的是跨域站点（比如示例中的谷歌）且你无法修改目标站点的代码，纯JS无法实现需求，只能依赖浏览器扩展能力

具体实现方法 #

1. 第一步：先判断弹窗是否被拦截 #

调用window.open时首先保存返回的窗口引用，直接通过返回值判断是否被拦截：

const targetTab = window.open("https://www.google.com", 'mytab');
// 被弹窗拦截器拦截的判断
if (!targetTab) {
  console.log('标签页打开失败，被浏览器拦截');
}

2. 同源场景下的状态判断 #

只要目标页面和当前页面同源，直接通过保存的窗口引用判断即可：

• 判断标签页是否仍打开：直接读取targetTab.closed属性，值为true表示标签页已关闭，为false表示仍处于打开状态
• 判断标签页是否处于焦点状态：调用targetTab.document.hasFocus()，返回true表示处于焦点状态，否则为未激活状态

注意：如果当前父页面刷新，之前保存的targetTab引用会丢失，无法再追溯之前打开的同名标签页的状态。

3. 跨域但可修改目标站代码的替代方案 #

如果打开的是跨域站点，但你可以修改目标站点的前端代码，可以通过postMessage做心跳通信实现状态判断：

• 目标标签页加载后，每隔1s向父页面发送心跳消息，同时监听自身的focus、blur事件，状态变化时主动向父页面发消息通知
• 父页面监听消息，连续3s没收到心跳就判定标签页已关闭，同时根据收到的焦点状态消息更新本地记录的状态

无法实现的场景说明 #

如果打开的是第三方跨域站点，且你没有权限修改目标站点的代码，纯JS没有任何可行方案实现状态判断，浏览器的安全策略禁止父页面读取跨域窗口的任何属性和状态，这种场景只能通过浏览器扩展实现。

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