HTML DOM 文档visibilityState 属性

visibilityState 属性是HTML DOM中的一个属性，用于表示当前文档的可见性，即文档是否可见。该属性的值是一个字符串，共有四种状态：

1. visible：文档在用户当前屏幕上可见。

2. hidden：文档在用户当前屏幕上不可见。

3. prerender：文档在用户当前屏幕上虽然不可见，但正在渲染中。在 iOS safari 中，如果页面在用户触摸屏幕之前使用缩放或滚动，则会发生这种情况。

4. unloaded：表示文档已经卸载或未加载。

语法

以下是 visibilityState 属性的语法：

document.visibilityState

示例

以下示例演示了如何检测文档的可见性，并在不同的可见性事件发生时输出相应的消息。

// 页面被隐藏
document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("页面被隐藏");
  } else {
    console.log("页面已可见");
  }
});

兼容性

以下是 visibilityState 属性的兼容性：

| 属性 | 说明 | | ------------------------------------------------------------ | ------------------------------------------------------------ | | visibilityState | IE10+, Edge 12+, Firefox 18+, Chrome 14+, Safari 6.1+, Opera 12.1+ |

参考

• Document: visibilityState