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

こんにちはtakosanです。

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.visibilityStatevisible、つまり現在のタブがアクティブなら、本来のtitleを表示。

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

visibilityState
Webページが表示されているタブのアクティブ状態を表すプロパティ。以下の3つの値を取得できる。
“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!";
  }
});

まとめ

今回はtitleを変える処理を入れてみましたが、ほかにも活用法はいくつもあると思います。

まずはアクティブ状態が判定できるということだけでも覚えて帰ってくださいね~

ざっくりまとめ
visibilitychangeで切替イベントを監視
visibilityStateでアクティブ/非アクティブを判定

では快適なWebライフをー

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次