Page visibility | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`hidden`	33	12	18	7	33	7
`visibilitychange_event` visibilitychange イベントは、タブのコンテンツが表示状態または非表示状態になったときに document に発生します。	62	18	56	14.1	62	14.5
`visibilityState` Document.visibilityState は読み取り専用プロパティで、この文書の可視性を返します。文書がバックグラウンドにあるか、最小化されたウィンドウにあるか、あるいはその他の理由によってユーザーから見えない状態にあるかどうかを調べるために使用することができます。	33	12	18	7	33	7

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

JAVASCRIPT

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

Page visibility の活用

Document.hidden は読み取り専用のプロパティで、ページが非表示になっているとみられるかどうかを示す論理値を返します。