ページが背面・前面になった時に処理を行う

説明

ページが背面(deactive)・前面(active)になった時に処理を行うにはvisibilitychangeイベントを利用します。2011年12月時点では、このイベントにはベンダープレフィックスが必要です。(Google Chrome、Firefox 10、IE10が対応。なお、Firefox 10ではベンダープレフィックスは不要) ページが背面(隠れているか)かどうかはdocumentオブジェクトのhiddenプロパティを調べます(2011年12月時点では、このプロパティにもベンダープレフィックスが必要です)。trueであればページは背面になっています。以下のサンプルはGoogle Chrome 15以降でのみ動作します。IE10の場合はmsvisibilitychangeイベントでmsHiddenプロパティを参照することになります。

サンプルプログラム

window.onload = function(){
document.addEventListener("webkitvisibilitychange", function(){
var ele = document.getElementById("result");
var d = new Date();
if (document.webkitHidden){
ele.innerHTML += "隠れた!"+d+"<br>";
}else{
ele.innerHTML += "前面に出た!"+d+"<br>";
}
}, false);
}
サンプルを実行
[戻る]