visibilitychange

当其选项卡的内容变得可见或被隐藏时,会在文档上触发 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仅支持前者。

属性

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.

例子

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

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

规范

规范 状态 注释
W3C Page Visibility API Recommendation

浏览器兼容性

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
visibilitychange eventChrome Full support 33
Full support 33
Full support 13
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 12
Notes
Full support 12
Notes
Notes The onvisibilitychange attribute was not supported until Edge 18. To listen to this event in earlier versions of Edge, use document.addEventListener('visibilitychange', function() {});.
Firefox Full support 56IE Full support 10
Notes
Full support 10
Notes
Notes The onvisibilitychange attribute is not supported in IE. To listen to this event, use document.addEventListener('visibilitychange', function() {});.
Opera Full support 12.1
Notes
Full support 12.1
Notes
Notes Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari Partial support 7
Notes
Partial support 7
Notes
Notes Doesn't fire the visibilitychange event when navigating away from a document, so also include code to check for the pagehide event (which does fire for that case in all current browsers). See WebKit bugs 116769, 151234, 151610, and 194897.
Notes The onvisibilitychange attribute was not supported until Safari 10.1. To listen to this event in earlier versions of Edge, use document.addEventListener('visibilitychange', function() {});.
WebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android Full support 56Opera Android Full support 12.1
Notes
Full support 12.1
Notes
Notes Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari iOS Partial support 7
Notes
Partial support 7
Notes
Notes Doesn't fire the visibilitychange event when navigating away from a document, so also include code to check for the pagehide event (which does fire for that case in all current browsers). See WebKit bugs 116769, 151234, 151610, and 194897.
Notes The onvisibilitychange attribute was not supported until Safari iOS 10.3. To listen to this event in earlier versions of Edge, use document.addEventListener('visibilitychange', function() {});.
Samsung Internet Android Full support 2.0

Legend

Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

相关链接