JavaScript プログラミング講座

 

ページの可視性について

 


■Page Visibility について

 
HTML5 世代の機能です。
 
http://www.w3.org/TR/page-visibility/ (Page Visibility (Second Edition))
 

■ページの可視性について


ページが隠れている状態である場合、省電力化の仕組みが動作します。
 
例えば、アニメーションの更新タイミングが、約 0 ~ 1 fps まで低下します。
 
一部のブラウザでは、タイマー関連の実行時間隔も、約 1 ~ 8 fps まで低下します。
 
ページの可視状態については、プロパティイベントから取得することができます。
 

■ Page Visibility に対応しているか調べる

 
document.visibilityState が undefined 値以外であるか、厳密比較します。
 
Internet Explorer 9 以前では利用できません。
 
Page Visibility に対応しているか調べる

// Page Visibility に対応している
if(document.visibilityState !== undefined){

	alert("Page Visibility に対応している");

}else{

	alert("Page Visibility に対応していない");

}
 
 


 

ページの可視状態を取得する

 


■ページの可視状態を取得する


Document オブジェクトから、ページの可視性に関する情報を取得する事ができます。
 
プロパティ名説明
hiddenBooleanドキュメントが隠れている場合 true が得られる。(読み取り専用)
visibilityStateStringドキュメントの可視ステート情報を取得する。(読み取り専用)
 
■可視ステート情報について
 
可視ステート情報には、以下の種類があります。
 
文字列可視説明
"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 イベントを使用します。
 
登録したコールバック関数の引数からは、Event オブジェクトが得られます。
 
ページの可視ステート状態を取得するには、Document 側のプロパティを使用します。
 
ページの可視状態の変化を監視する

// イベントリスナーに対応している
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);

	});

}