新窗口初始加载时visibilitychange触发hidden而非visible的异常问题

使用JavaScript打开新标签页时，为新窗口绑定visibilitychange事件处理函数实现页面卸载相关逻辑（官方推荐优先使用该事件替代onunload与pagehide事件），预期逻辑为：绑定事件监听器后，当文档的visibilityState变为hidden时（触发场景包括用户主动关闭标签页、导航跳转至其他页面等），执行标签页收尾逻辑，并通知父窗口触发对应业务功能。

核心实现代码如下：

var testTab = window.open(myPath, 'testTab');
testTab.addEventListener('visibilitychange', function () {
  if(testTab.document.visibilityState === 'hidden'){
    onHidden();
  }
  else {
    onVisible();
  }
});
testTab.focus();

实际测试异常表现：

• 新标签页打开后，在窗口任何内容加载完成前，监听器就会触发，此时拿到的visibilityState为hidden
• 后续即使窗口完成全部加载与渲染流程，该事件也不会再次触发
• 手动隐藏该标签页（例如在同浏览器窗口切换回原标签页）时，事件会正常触发hidden状态，再次切回新打开的标签页也会正常触发visible状态，这部分交互行为完全符合预期

补充测试结果：

• 使用pagehide事件实现相同逻辑，存在完全一致的问题：新窗口首次打开、内容尚未加载时就会立即触发该事件
• unload/beforeunload事件在页面初始加载阶段表现符合预期（加载时不会触发），页面卸载时也能正常触发，但这类事件无法监听除页面卸载外的其他可见性丢失场景，且公开资料均不推荐使用这类事件，尤其移动端兼容性表现较差。

初始误触发本质是新窗口初始空文档的事件被误捕获，核心逻辑如下：

• 调用window.open()后，返回的window对象会首先加载浏览器默认创建的about:blank空文档，调用open后立刻绑定的监听器，实际是注册在这个临时空文档的上下文里。
• 当新窗口开始导航到指定的myPath地址时，临时about:blank文档会被卸载，此时它的visibilityState会变更为hidden，这就是第一次异常hidden触发的来源；后续pagehide的异常触发逻辑完全一致——都是临时空文档卸载时抛出的事件，和目标加载页面无关。
• 目标页面加载完成后，如果处于前台可见状态，它的初始visibilityState就是visible，由于没有发生状态变更，自然不会触发visibilitychange事件，这就是加载完成后没有自动触发visible回调的原因。
• 后续手动切换标签页时事件正常触发，是因为此时新窗口已经加载完成目标文档，事件冒泡逻辑正常生效。
• unload/beforeunload初始阶段不触发，是因为浏览器自动创建的临时空文档卸载时，默认不会触发这两个事件（这类事件仅对用户主动导航进入的文档生效）。

方案1（通用推荐，无跨域限制） #

不要在父窗口直接给新窗口绑定事件，在myPath对应的目标页面内部自行绑定visibilitychange事件，需要通知父窗口时通过postMessage做跨上下文通信即可，这种方式完全规避初始空文档的干扰，也支持跨域场景。

方案2（仅适用于同源场景） #

等新窗口目标页面加载完成后再绑定事件，同时主动校验一次初始可见性状态，补上初始状态不会触发变更事件的逻辑，注意事件要绑定在document对象上（符合规范定义，避免兼容性问题）：

var testTab = window.open(myPath, 'testTab');
testTab.addEventListener('load', function() {
  const targetDoc = testTab.document;
  // 主动处理初始状态
  if(targetDoc.visibilityState === 'hidden'){
    onHidden();
  } else {
    onVisible();
  }
  // 绑定后续状态变更监听
  targetDoc.addEventListener('visibilitychange', function () {
    if(targetDoc.visibilityState === 'hidden'){
      onHidden();
    } else {
      onVisible();
    }
  });
});
testTab.focus();

• 不要在window.open调用后立刻访问新窗口的document属性绑定事件，此时拿到的是临时空文档的引用，后续页面导航后该引用对应的文档会被销毁，绑定的逻辑不会作用在目标页面上。
• visibilitychange事件规范定义的触发目标是document对象，虽然部分浏览器支持事件冒泡到window，但直接绑定在document上兼容性最好。

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