ページの可視性について
■Page Visibility について
HTML5 世代の機能です。
http://www.w3.org/TR/page-visibility/ (Page Visibility (Second Edition))
■ページの可視性について
ページが隠れている状態である場合、省電力化の仕組みが動作します。
■ブラウザが Page Visibility に対応しているか調べる
Internet Explorer 9 以前では利用できません。
ページの可視状態を取得する
■ページの可視状態を取得する
Document オブジェクトから、ページの可視性に関する情報を取得する事ができます。
| プロパティ名 | 型 | 説明 |
| hidden | Boolean | ドキュメントが隠れている場合 true が得られる。（読み取り専用） |
| visibilityState | String | ドキュメントの可視ステート情報を取得する。（読み取り専用） |
■可視ステート情報について
可視ステート情報には、以下の種類があります。
| 文字列 | 可視 | 説明 |
| "visible" | ○ | ドキュメントがモニタ上で目視可能な状態。 |
| "hidden" | × | ドキュメントが完全に隠れている状態。 |
| "prerender" | × | 事前レンダリングされてから、可視に変化していない状態。（実装は任意） |
| "unloaded" | × | ドキュメントが、アンロードされた状態。（実装は任意） |
■取得例
ページの可視ステート状態を取得する
// ------------------------------------------------------------
// 1 fpsの時間隔で関数を実行する
// ------------------------------------------------------------
setInterval(function() {
// 可視状態を取得する
var visibility_hidden = document.hidden;
// 可視ステート情報を取得する
var visibility_state = document.visibilityState;
// 出力テスト
console.log(visibility_hidden);
console.log(visibility_state);
} , 1000);
ページの可視状態の変化を監視する
■ページの可視状態の変化を監視する
ページの可視状態の変化を監視するには、visibilitychange イベントを使用します。
ページの可視状態の変化を監視する
// イベントリスナーに対応している
if(document.addEventListener){
// ------------------------------------------------------------
// ページの可視状態の変化を監視するイベント
// ------------------------------------------------------------
document.addEventListener("visibilitychange" , function(e){
// 可視状態を取得する
var visibility_hidden = document.hidden;
// 可視ステート情報を取得する
var visibility_state = document.visibilityState;
// 出力テスト
console.log(visibility_hidden);
console.log(visibility_state);
});
}