ブラウザのタブが表示／非表示になるタイミングで処理を実行する

ブラウザのタブの表示状態で発生するイベントについて

ページを開いているブラウザのタブが表示状態（フォーカス状態）になったときはイベント「focus」が発生し、他のタブに切り替えられて非表示状態（フォーカス解除状態）になったときはイベント「blur」が発生します。
ブラウザのタブ切り替えのみでなく、他アプリにフォーカスが移動したときにブラウザからフォーカスが外れたときや、反対にブラウザにフォーカスが戻ってきたときも同じイベントがそれぞれ発生します。

よく似たイベントとして、ページの表示状態が切り替わると発生するイベント「visibilitychange」があります。
こちらのイベントもタブの切り替わりで発生しますが、他アプリへのフォーカスの移動では発生しません。
イベント「visibilitychange」の詳細やコードを使った解説については、別記事「ページの表示状態の切り替わりを取得する」をご覧ください。

以下のコードはページを表示しているタブからフォーカスが外れたとき、フォーカスされたときにそれぞれの時刻を取得して出力します。
赤字になっている箇所がフォーカスイベントを設定している箇所です。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

  // フォーカス状態になったとき
  window.addEventListener('focus', function(){
    var datetime = new Date();
    console.log("focus in " + datetime.getHours() + ":" + datetime.getMinutes() + ":" + datetime.getSeconds());
  });

  // フォーカスが解除されたとき
  window.addEventListener('blur', function(){
    var datetime = new Date();
    console.log("focus out " + datetime.getHours() + ":" + datetime.getMinutes() + ":" + datetime.getSeconds());
  });

});

1行目のaddEventListenerメソッドでは、ページの読み込み完了時に発生するイベント「DOMContentLoaded」をイベントリスナーに登録しています。
このイベントが起きた時に今回のタブが表示／非表示になったときのイベントリスナーの登録を行います。

まずはフォーカス状態になったときのイベント「focus」をイベントリスナーに登録します。
イベントが発生したときにフォーカスされた時刻を「時:分:秒」のフォーマットで出力するように、Dateオブジェクトを作成し、そのすぐ後にconsole.logメソッドでコンソール出力を行います。

続いてフォーカスが解除されたときのイベント「blur」をイベントリスナーに登録します。
実行する処理はフォーカス時とほぼ同じ内容で、時刻の前に表示する「focus out」のみ変更しています。

このコードを実行すると、ブラウザのタブを表示／非表示を切り替えたタイミングで次のようにコンソール出力されます。

コンソールの出力例

focus out 13:53:25
focus in 13:53:25
focus out 13:53:27
focus in 13:53:45
focus out 13:53:46
focus in 13:54:18

現在表示しているページの表示状態（フォーカス状態）をイベントに登録することで、非表示になったときに実行していた処理を一時中断したり、反対に表示になったときに再開したりすることができるようになります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。