Document.visibilityState

Document.visibilityState 読み取り専用プロパティは、文書 (document) の可視性、つまりこの要素が現在表示されているかのコンテキストを返します。 文書がバックグラウンドにあるのか、非表示のタブにあるのか、プリレンダリングのためにのみ読み込まれるのかを知ることは有用です。 可能な値は次のとおりです。

'visible'
ページのコンテンツは、少なくとも部分的に表示される場合があります。 実際には、これはページが最小化されていないウィンドウのフォアグラウンドタブであることを意味します。
'hidden'
ページのコンテンツはユーザーには表示されません。 実際には、これは文書がバックグラウンドタブまたは最小化されたウィンドウの一部であるか、OS の画面ロックがアクティブであることを意味します。
'prerender'
ページのコンテンツはプリレンダリングされており、ユーザーには表示されません(document.hidden の目的で非表示と見なされます)。 文書はこの状態で開始する場合がありますが、別の値から移行することはありません。 注: これは標準から削除されました。 詳細については、互換性の表を確認してください。

このプロパティの値が変更されると、visibilitychange イベントが Document に送信されます。

これの一般的な用途は、文書がプリレンダリングされている場合に一部のアセットのダウンロードを防止したり、文書がバックグラウンドにあるか最小化されている場合に一部のアクティビティを停止したりすることです。

構文

var string = document.visibilityState

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
  // 振る舞いを変更します...
});

仕様

仕様 状態 コメント
Page Visibility (Second Edition)
Document.visibilityState の定義
勧告 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
visibilityStateChrome 完全対応 33
完全対応 33
完全対応 13
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 18
完全対応 18
未対応 10 — 52
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 10Opera 完全対応 12.1
補足
完全対応 12.1
補足
補足 Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari 完全対応 7WebView Android 完全対応 4.4.3Chrome Android 完全対応 33
完全対応 33
完全対応 あり
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 18
完全対応 18
未対応 10 — 52
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 12.1
補足
完全対応 12.1
補足
補足 Doesn't fire the visibilitychange event when the browser window is minimized, nor when hidden is set to true.
Safari iOS 完全対応 7Samsung Internet Android 完全対応 3.0
完全対応 3.0
完全対応 1.0
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
prerender value
非推奨非標準
Chrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 49IE ? Opera ? Safari ? WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 49Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。