W3cubDocs

/Web APIs

Document: visibilityState property

The Document.visibilityState read-only property returns the visibility of the document, that is in which context this element is now visible. It is useful to know if the document is in the background or an invisible tab, or only loaded for pre-rendering.

Possible values are:

visible: The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.
hidden: The page content is not visible to the user. In practice this means that the document is either a background tab or part of a minimized window, or the OS screen lock is active.

When the value of this property changes, the visibilitychange event is sent to the Document.

Typical use of this can be to prevent the download of some assets when the document is solely prerendered, or stop some activities when the document is in the background or minimized.

Syntax

document.visibilityState

Examples

document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState);
  // Modify behavior…
});

Specifications

Specification
HTML Standard # dom-document-visibilitystate

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`visibilityState`	3313	12	1810–52	10	201512.1–15	7	≤374.4.3	3318	1810–52	201412.1–14	7	2.01.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState