JS にてブラウザのバックグラウンドとフォアグラウンドを検知する

最終更新日:

ブラウザがバックグラウンドに行った時と、
戻ってきた時にイベントを発火させたい時は、
visibilitychange イベント を使用する。

PC ではバックグラウドという状態がどういう時を指しているのか、
厳密には分からないけど、イベントの発火条件は下記参照。

サンプルコード

  • visibilitychange イベントは document か window に追加する。
  • 非表示かどうかは document のプロパティにある hidden もしくは visibilityState で判定する
<!doctype html>
<html>
<head>
	<meta charset="utf8">
	<title>visibilitychange - js sample</title>
</head>
<body>
	<script type="text/javascript">
		document.addEventListener("visibilitychange", () => {
			if (document.hidden) {
				console.log('visibilitychange: hidden')
			} else {
				console.log('visibilitychange: show')
			}
		})
	</script>
</body>
</html>

イベントの発火タイミング

  • PC
    • 別コンテンツのフルスクリーンからの切り替え
    • ブラウザタブの切り替え
    • PC ログイン
    • ブラウザの起動
  • iPhone
    • ホームボタンでの離脱
    • 電源ボタンでの離脱
    • ホーム画面からの復帰
    • ブラウザタブの切り替え
    • アプリケーションの切り替え
    • ブラウザの起動