visibilitychange - Web API 接口参考 编辑

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

概述

Specification

Page Visibility (Second Edition)

Interface

event

Bubbles

Yes

Cancelable

No

Target

Document

Default Action

None

使用说明

该事件不包括文档的更新的可见性状态，但是您可以从文档的  visibilityState 属性中获取该信息。

当 visibleStateState 属性的值转换为 hidden 时，Safari不会按预期触发visibilitychange； 因此，在这种情况下，您还需要包含代码以侦听 pagehide 事件。

出于兼容性原因，请确保使用  document.addEventListener 而不是window.addEventListener来注册回调。 Safari <14.0仅支持前者。

属性

例子

本示例在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐。

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

规范

浏览器兼容性

BCD tables only load in the browser

No compatibility data found. Please contribute data for "api.Document.visibilitychange" (depth: 1) to the MDN compatibility data repository.

相关链接

• 使用页面可见性API
• Document.visibilityState