visibilitychange

当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。

使用说明

一、该事件不包括文档的更新的可见性状态，可以从文档的 visibilityState 属性中获取该信息。
1、当 visibleStateState 属性的值转换为 hidden 时，Safari不会按预期触发visibilitychange； 因此，在这种情况下，您还需要包含代码以侦听 pagehide（见页面隐藏事件：https://www.yuque.com/tqpuuk/yrrefz/oe5g7c） 事件。
2、出于兼容性原因，请确保使用 document.addEventListener 而不是window.addEventListener来注册回调。 Safari <14.0仅支持前者。

属性

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not.
cancelable 只读 Boolean Whether the event is cancellable or not.

| 【示例】本示例在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐。```javascript document.addEventListener(“visibilitychange”, function() { console.log( document.visibilityState ); });

  1. ```javascript
  2. document.addEventListener("visibilitychange", function() {
  3.   if (document.visibilityState === 'visible') {
  4.     backgroundMusic.play();
  5.   } else {
  6.     backgroundMusic.pause();
  7.   }
  8. });

| | —- |

Document.visibilityState

一、Document.visibilityState （只读属性）, 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：

  • ‘visible’ : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.
  • ‘hidden’ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 ‘锁屏状态’ .
  • ‘prerender’ : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.

二、当此属性的值改变时, 会递交 visibilitychange事件给Document.

用法

一、典型用法是防止当页面正在渲染时加载资源, 或者当页面在背景中或窗口最小化时禁止某些活动.

语法

var string = document.visibilityState