Document: visibilitychange event - Web APIs 编辑

The visibilitychange event is fired at the document when the content of its tab have become visible or have been hidden.

Usage notes

The event doesn't include the document's updated visibility status, but you can get that information from the document's visibilityState property.

Safari doesn’t fire visibilitychange as expected when the value of the visibilityState property transitions to hidden; so for that case, you need to also include code to listen for the pagehide event.

For compatibility reasons, make sure to use document.addEventListener to register the callback and not window.addEventListener. Safari < 14.0 only supports the former.

Examples

This example begins playing a music track when the document becomes visible, and pauses the music when the document is no longer visible.

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

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Page Visibility API
• Document.visibilityState