ページの表示状態の切り替わりを取得する

ページの表示状態で発生するイベントについて

ページの表示状態はvisibilityStateプロパティの値から確認することができます。
値が「visible」のときは表示された状態、「hidden」のときは非表示です。

また、ページの表示状態が変わったときはイベント「visibilitychange」が発生します。
このイベントはブラウザのタブが切り替わってページが表示されたり非表示になったときや、ブラウザ自体が最小化の操作で非表示になったり、最小化から復帰したときに発生します。

このイベントによく似たものとしてwindowオブジェクトを対象とするイベント「focus」とイベント「blur」があります。
この2つはタブ切り替えや最小化の操作に加えて、表示中のブラウザから他アプリへのフォーカスの移動でも発生します。
対してイベント「visibilitychange」は他アプリへのフォーカス切り替え時には発生しません。
イベント「focus」とイベント「blur」についての詳細やコードを使った解説については、別記事「ブラウザのタブが表示／非表示になるタイミングで処理を実行する」をご覧ください。

以下のコードは、ページの表示状態が変わったときに表示状態をコンソールに出力します。

コード例

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

  // ページの表示状態が変わったときに実行
  document.addEventListener("visibilitychange", function() {
    console.log(document.visibilityState);
  });
});

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

続いて、ページの表示状態が変わったときに発生するイベント「visibilitychange」をイベントリスナーに登録します。
このイベントが発生したときに、documentオブジェクトのvisibilityStateプロパティから値を取得してコンソールに出力します。

このコードを実行すると、ブラウザのタブを切り替えたり、最小化や復帰をすると次のようにコンソール出力されます。

コンソールの出力例

hidden
visible
hidden
visible

ページが表示状態のときのみ処理を実行するように設定したり、非表示中はバックグラウンド処理に切り替えることができます。