切换虚拟工作区时生效的iframe可见性事件监听器选型

问题出在部分桌面环境（如Gnome、KDE）中，浏览器窗口切换虚拟工作区时，visibilitychange事件不会触发——这类环境认为窗口只是处于后台工作区，并未被标记为hidden状态。

你可以通过补充监听顶层窗口的focus事件来解决这个问题，代码如下：

// 保留原有的visibilitychange监听，覆盖标签页切换场景
window.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') refreshImgArray(); 
});

// 新增顶层窗口focus监听，覆盖虚拟工作区切换场景
window.top.addEventListener('focus', function() {
    // 额外检查可见状态，避免不必要的重复触发
    if (document.visibilityState === 'visible') {
        refreshImgArray();
    }
});

说明 #

• 使用window.top是因为iframe自身的focus事件可能受上下文限制，无法直接捕获浏览器窗口从其他工作区切换回来的焦点变化；顶层窗口（浏览器标签对应的窗口）会在工作区切换时可靠触发focus事件。
• 保留原有的visibilitychange监听，可以继续覆盖标签页切换的场景，两者组合能覆盖绝大多数可见性变化的情况。
• 如果iframe和父页面存在跨域限制，无法访问window.top，可以改为监听iframe自身窗口的focus事件：

  window.addEventListener('focus', function() {
      if (document.visibilityState === 'visible') {
          refreshImgArray();
      }
  });
  

  不过这种方式的兼容性略差，建议优先保证同域场景下使用window.top的方案。

内容的提问来源于stack exchange，提问作者Luis A. Florit