Document オブジェクト hidden 属性 (DOM), visibilityState 属性の値 hidden、visible (DOM)

[2] Document オブジェクトの hidden 属性は、文書が表示されているかを返します。

[16] Document オブジェクトの visibilityState 属性の値 hidden、 visible は文書が隠れていること、いないことをそれぞれ表します。

[17] これら2つの「hidden」の意味は若干異なっています。

仕様書

`visibilityState` 属性の値 `hidden`

[19] 最上位閲覧文脈に含まれている Document がまったく見えないなら visibilityState 属性は hidden を返さなければなりません。ただし >>7 の場合は visible を返して構いません。 >>18

[20] >>19 の規定からすると hidden 属性が真なら visibilityState 属性は必ず hidden になりそうなものですが、 >>11 の場合に unloaded という別の値が用意されています。また prerender という値も用意されています。更に vendor prefix のついた値も認められており、厳密に解釈すると >>19 の規定に反してしまう可能性があります。仕様書の例示には >>9、>>10、>>13 のみ挙げられています。

[32] その後の改訂でこの辺の規定は整理されています。

[29] 文書の可視性状態の値隠れ (hidden) は、文書がまったく画面内にないことを表します >>28。

`visibilityState` 属性の値 `visible`

[23] 最上位閲覧文脈に含まれている Document がどこかの画面に一部分でも表示されているなら visibilityState 属性は visible を返さなければなりません。また >>7 の場合も visible で構いません。 >>18

[24] これは hidden が偽になる場合と同じである >>18 とわざわざ明記されています (>>19 については言及なし)。

[30] 文書の可視性状態の値可視 (visible) は、文書の少なくても一部が可視状態であることを表します >>28。

可視性の決定

[45] 文書の可視性状態は、文書が閲覧文脈中にあり、それが最上位閲覧文脈である時のみ定義されているようです。

[35] 文書の可視性状態が可視であるか隠れであるかは、次のように判断されます >>36。

[44] 文書の閲覧文脈の窓の画面のロック画面表示中が真なら、
- [50] 隠れです。
[43] 利用者エージェントが文書を unload 中なら、隠れです。
[41] 文書の閲覧文脈の窓の最小化が真なら、
- [46] 隠れです。
[38] それ以外なら、
- [42] 利用者エージェントが完全に隠されていても、それがアクセシビリティーツールであり、文書の表示であるなら、可視です。
- [39] 文書の閲覧文脈の前景が真なら、
  - [47] 可視です。
- [40] それ以外 (背景) なら、
  - [48] 隠れです。

[49] つまり、最前面のタブ以外では、隠れとなります。

[37] 事前レンダリングについては、そちらの項を参照。

[70] アクセシビリティーツールにしか言及がありませんが、 IME なども同様と思われます。

`Document` インターフェイス `hidden` 属性 (DOM)

[4] Document インターフェイスの hidden IDL属性は、最上位閲覧文脈の文書が一部でも可視なら偽、そうでないなら真を返します。

[6] 当該 Document が直接含まれている閲覧文脈ではなく、最上位閲覧文脈によって決まります。

[5] Document の defaultView が null なら、真を返さなければなりません >>1。

[34] 本属性は歴史的なものであり、 visibilityState 属性を使うべき (should) です >>31。

[3] 取得時、文書が隠れているか決定する手順を実行しなければなりません >>31。この属性は読み取り専用で、 boolean を返します >>31。

[33] 文書が隠れているか決定する手順 (steps to determine if the document is hidden) は、可視性状態を決定する手順が visible を返すかどうかを返します >>31。

[7] 通常全画面で表示するようなアクセシビリティ・ツールもあったりしますから、 Webブラウザーが最小化されておらず他のアプリケーションに完全に隠れてしまっているような場合であれば偽を返しても構いません >>1。

[8] 例えば次の場合に真を返します。

[9] 最小化されている場合 >>1
[10] 裏のタブになっている場合 >>1
[11] unload しようとしている場合 >>1
[12] session history entry を探索しようとしている場合 >>1
[13] OS のロック画面が表示されている場合 >>1
[21] visibilityState が prerender の場合

[25] 値の変化のタイミングについては visibilitychange の項をご覧ください。

副作用

[52] 隠れ状態は、可視状態とは違う動作となることがあります。

[26] navigator.vibrate が無視されるかどうかは、 document.hidden 属性の値に依存する >>27 と以前はされていましたが、現在は可視性状態に依存する形に改められています。

[53] Chrome では、隠れ状態の文書は、捨てられることがあります。
[54] 隠れ状態の文書のスクリプトその他のタスクの実行は、他の文書よりも優先度が下げられるかもしれません。
[63] DeviceOrientation Event の発火の有無や頻度にも影響するかもしれません。
[66] アイドル期間に入るかどうかの判断に影響するかもしれません。ひいては requestIdleCallback の処理遅延に影響することがあります。

[59] Chrome は非表示状態のタブの活性文書も捨てることがあるようです。 2016-09-16T04:46:45.900Z

[51] 捨てる正確な条件はわかりませんが、一部 fetch が実行中でも平気で捨てるようで、困ったものです。

[60] POST で作成されたページも勝手に捨てられて、再表示できずにかわりに再読込を促すネットワークエラーが表示されるのも、困ったものです。

[55] Webブラウザーは次のような点に注意が必要です。

[61] ネットワーク処理の実行中なら、文書を捨てるべきではありません。
[62] POST で作成された文書を捨てるべきではありません。
[56] 利用者は、時間のかかる処理を待つ間他のタブを開いているかもしれません。隠れている処理が停止されたり、過剰に優先度を下げられたりすると、利用者の期待に反します。
[57] 利用者は、音声や動画を再生させながら、これを BGM として他のタブを開いた状態にするかもしれません。
[64] 利用者は、音声や動画を一時停止状態にして待機させた状態で、他のタブで作業して、後でまた続きから再生したいかもしれません。
[58] Webアプリケーションはログインセッションや利用者の操作状態などをクライアント側で (ストレージなどに明示的に保存せず) 保持したり、サーバーと低頻度で通信したりしているかもしれません。一定時間利用者の操作がないからと言って、これを破棄するのは利用者の期待に反する動作かもしれません。

[68] 非表示であっても、他の窓の文書から参照されていたり、ワーカーや postMessage を通じて通信していたりすることがあります。 BroadcastChannel で通知を受け付けているかもしれません。 Webブラウザーはどの文書を捨てても問題が出ないか、慎重に判断する必要があります。

[71] Chrome は最前面のタブに表示していても窓が隠れている状態なら、破棄してしまうことがあります。困ったもんです。。。 2021-02-04T02:56:21.500Z

[73] Chrome は開発者コンソールを開いていても捨ててしまいます。困ったものです。 2021-12-01T06:14:27.500Z

[74] Chrome は捨ててしまうまでいかないまでも、動画の再生を停止してしまうことがあります。 (音声の再生は継続されます。) Windows で画面撮影用のソフトウェアを使って Chrome の画面を録画記録しながらビデオ会議をしつつ、表に他の画面を開いているような場合に、 (録画されてることを Chrome は検知し得ないので、平気で動画再生を止めてしまい、) 音声のやり取りは続いているのに動画が真っ暗になってたりして、ほんと困ります。。。

[75] Chrome は最前面の窓の最前面のタブですら捨てちゃうことあった! やばすぎ! 2022-05-18T11:36:20.200Z

[76] その割にメモリー満杯近くなのになぜか破棄されない背景タブとかあって謎だよね。 2022-06-23T02:22:23.500Z

歴史

[15] Page Visibility 仕様により追加されました。 WebKit では webkitHidden として実装されています 2013-05-20T14:04:38.00Z。 WinIE では msHidden、 Firefox では mozHidden も実装されていました。