強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Firefox 10で追加されたPage Visibility APIの使い方

Firefox

Page Visibility APIを使えば別のタブに切り替わったり、ブラウザのウィンドウが最小化された事を感知出来ます。

サンプル

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
window.addEventListener("load", function() {
	document.addEventListener("mozvisibilitychange", function() {
		document.title = document.mozHidden;
	}, false);
}, false);
</script>
	<title>イベント発生時状態を取得</title>
</head>
<body>
ブラウザのタイトルに hidden の値を表示します。タブを切り替えた時にタイトルを確認してみて下さい。
</body>
</html>

別のタブに切り替わったり、最小化した時やそれらの状態から復帰した時に mozvisibilitychange イベントが発生します。

document.mozHidden は別のタブに切り替わっていたりした場合には true 、プログラムが記述してあるタブが表示されている時は false になります。

こちらで試せます。

こちらでは全ブラウザ対応版を試せます。

Using the Page Visibility API - MDN
https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API

関連情報

Firefox 10 for developers - MDN
https://developer.mozilla.org/ja/Firefox_10_for_developers