【jQuery】Page Visibility APIでページが見えてるかどうかを判定する

ページが見えているか見えていないかを判定してくれるPage Visibility API。

なんのこっちゃ分からない方はデモサイトを開き、デベロッパーツールなどでコンソールを開いてください。
そして、ブラウザのタブを別のタブに切り替えて、戻ってきてください。

デモサイト

そうするとどうでしょう。
「見えてないよ」「見えてるよ」と出てきていると思います。

なんとなくイメージ湧いたと思いますが、このようにWebページが見えているかどうかを判定してくれます。

で、何に使うん？？

ページが見えているとき、見えていないときを教えてくれますが何に使うのか思いつかないと思います。

例えば、動画で

例えば、動画のような自動再生するコンテンツがあったとして。
閲覧者がふとタブを切り替えた時、Webページを見てないのに動画を垂れ流していたら動画を停止した方がいいですよね。

こういった自動で動いているものを、見られていない時は一時的に止めたいときに使えそうです。

不具合対応で

タブ移動して戻ってきたときに停止していたはずのスライダーが動いていた不具合に遭遇したことがあります。

そのとき実際にPage Visibilityを使いました。

覚えておくと不具合が出たときに解決してくれるかもしれません。

どうやって使うの？

記述は以下のように書きます。

document.addEventListener("visibilitychange", handler);
function handler() {
  if (document.visibilityState == "visible") {
    // 見ているときの記述
    console.log('見えてるよ');
  } else {
    // 見えていないときの記述
    console.log('見えてないよ');
  }
}

難しくないですね。

ブラウザはモダンブラウザとIE10以上は対応してます。

Can I Use

使いどきは頻繁にあるわけではないと思いますが、頭の片隅に置いておくといざという時便利そうです。

参考にしたサイト

Page Visibility API の使用