いまユーザーはこのタブを見ているか?あるいは他のタブへ移動して(inactiveになって)しまったか?はたまたブラウザ自体からフォーカスが外れているか?こんなことをJavaScriptから確認(チェック)する術はないものかと調べてみると、あった!
Page Visibility API - Web APIs | MDNaddEventListenerやonイベントで状態を確認できるという。document.visibilityStateプロパティ(読み取り専用)からユーザーが見ている(visible)か見ていない(hidden)かも確認できる模様。
ただ、あまり古いブラウザへは対応していない様子なので、上記リンク(Page Visibility API - Web APIs | MDN)のExampleにはベンダープレフィックス付きAPIへのフォールバックに対応したコードが載っていた。
わたしは特にレガシーブラウザへの対応は不要であったため、次のようなコードで実装/対応できた。
if ( typeof document.hidden !== 'undefined' ) {
document.addEventListener( 'visibilitychange', () => {
if ( document.visibilityState === 'hidden' ) {
console.log( 'ユーザーがどっかへ行ったよ' );
}
else {
console.log( 'ユーザーが見てるよ!' );
}
}, false );
}
onblurやonmousemoveイベントやらでWatchdogのようなことをしていたあの頃がなつかしい…。
![](http://img2.blogblog.com/img/icon18_edit_allbkg.gif)
1577237283990730018
https://www.storange.jp/2022/10/page-visibility-api.html
https://www.storange.jp/2022/10/page-visibility-api.html
このタブがアクティブか、JavaScriptから確かめる方法
2022-10-27T18:09:00+09:00
https://www.storange.jp/2022/10/page-visibility-api.html
Hideyuki Tabata
Hideyuki Tabata
200
200
72
72
![](https://lh6.googleusercontent.com/-aatwVu6vLek/UK-rk-jfWzI/AAAAAAAAB4k/6gO6IQURbGY/s200-c/seeker5084-R_iOSicon.png)
![](https://2.bp.blogspot.com/-KfKlTbwIOew/WIAk8LOl2RI/AAAAAAAAG4Y/E_lwspbgGZ0JaWYj5b6Rql9KhyjDYao7ACLcB/s72-c/placeholder.jpg)