【JS】アクティブな表示タブかどうか判別する

2023年4月18日2024年4月11日

いきなりやけど、”今見てるタブ”ってどうやって判別すんの？

Chromeなどのブラウザで複数開いたタブの中でいま見ているタブをどのように判別するのでしょうか？

今回はJavaScriptを使って、そのタブがアクティブか非アクティブかを判定するプログラムをつくってみたいと思います。

ちなみに、フォーカスがあたっているタブという表現もされたりしますね。

では早速いってみましょう。

まずは完成品のコード

今回ご紹介するコードは、現在のタブがアクティブ（今みている状態）かどうかを判別し、

非アクティブ（今みていない状態）になったら、ページのタイトルを変えるという遊び心のあるプログラムになっています。

// 現在のタイトルを保持する変数を定義する
const originalTitle = document.title;

// visibilitychangeイベントを監視する
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // タブがアクティブならページのtitleを元々のtitleに設定する
    document.title = originalTitle;
  } else {
    // タブが非アクティブならtitleを変える
		document.title = "Hey! Come back!";
  }
});

このページに実は今回のプログラムを仕込んであります。

一度別タブを見に行って、戻ってきてみてください。

何かわかったでしょうか？そう、タブの名前、つまりdocument.titleが、非アクティブな状態の時に「Hey! Come back!」に変わっています。なんか戻ってあげたくなりますよね←

コードの解説

ではここからはコードを解説していきましょう。

まず冒頭では、現在のtitleを取得しておいて、このタブに戻ってきた時には正規のtitleに戻せるようにしています。

// 現在のタイトルを保持する変数を定義する
const originalTitle = document.title;

続いて下記の部分では


// visibilitychangeイベントを監視する
document.addEventListener("visibilitychange", function() {
  ~~~~~
});

「visibilitychange」イベントを監視しています。

「visibilitychange」とは、Webページのタブがアクティブ/非アクティブが変化したときに発生するイベントのことです。

これを使うことで、Webページのアクティブ状態の”切替”を監視することができます。

ほえー、visibilitychangeで”切替が発生した”ということがわかるんやな。
ん？でも結局タブは今アクティブなの？非アクティブなの？

鋭いですね。visibilitychangeだけでは”切替イベントが発生した”ということしか検知できません。

今アクティブなのかどうかはvisibilityStateで判定します。

以下はアクティブと非アクティブの分岐処理を含めたコードになりますが、

// visibilitychangeイベントを監視する
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // タブがアクティブならページのtitleを元々のtitleに設定する
    document.title = originalTitle;
  } else {
    // タブが非アクティブならtitleを変える
		document.title = "Hey! Come back!";
  }
});

ここでvisibilityStateを使っています。

document.visibilityStateがvisible、つまり現在のタブがアクティブなら、本来のtitleを表示。

非アクティブなら、「Hey! Come back!(もどってきて～！)」というtitleに書き換えます。

visibilityState
Webページが表示されているタブのアクティブ状態を表すプロパティ。以下の３つの値を取得できる。
“visible”：Webページが表示されているタブがアクティブな状態
“hidden”：Webページが表示されているタブが非アクティブな状態
“prerender”：Webページがプレレンダリング中の状態（一部のブラウザでのみサポート）

解説は以上になります。

コードの全体像としては冒頭のものと同じですが、こんな感じになります↓

// 現在のタイトルを保持する変数を定義する
const originalTitle = document.title;

// visibilitychangeイベントを監視する
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // タブがアクティブならページのtitleを元々のtitleに設定する
    document.title = originalTitle;
  } else {
    // タブが非アクティブならtitleを変える
		document.title = "Hey! Come back!";
  }
});