JavaScript：タブが隠れたときの判定

visibilitychangeイベントとvisibilityStateプロパティを使って判定できる。

// タブが見えているかどうかの判定
document.addEventListener("visibilitychange", () =>{
	if(document.visibilityState === "hidden"){
		// 非表示時
		console.log("かくれた");
	}
	else{
		// 表示時
		console.log("みえた");
	}
}, false);

コンソールに表示しているので、タブを複数開いた状態で、タブを切り替えながら確認してほしい。ただし、タブがかくれているときはコンソールが見えない（笑）ので、「かくれた」→「みえた」の順で表示されていることが確認できればOK。

サンプルをみる

ソースコード例

index.html

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>タブが見えているかどうかの判定</title>
7    <script src="main.js" type="text/javascript"></script>
8</head>
9<body>
10</body>
11</html>

main.js

1/*
2 * 起動時の処理
3 */
4window.addEventListener("load", ()=>{
5 
6    // タブが見えているかどうかの判定
7    document.addEventListener("visibilitychange", () =>{
8        if(document.visibilityState === "hidden"){
9            // 非表示時
10            console.log("かくれた");
11        }
12        else{
13            // 表示時
14            console.log("みえた");
15        }
16 
17    }, false);
18 
19});