ユーザーがタブを変更したことを検出するJavascript


I want to write a webpage for online quiz.Basic requirement i have is that, If the person taking quiz changes tab or opens new window even without minimizing browser, i.e if the person tries to see the answer from some other window/tab, quiz should stop.How can i do that?<br&gt.I want to write a webpage for online quiz.Basic requirements i have is that, if the person taking quiz changes tab or opens new window even without minimizing browser, i.e if the person tries to see the answer from some other window/tab, quiz should stop; 追伸:HTML5の新しい機能ではなく、現在の主要なブラウザでサポートされている必要があります。

ソリューション

タブやウィンドウがアクティブかどうかは、blur / focusイベントリスナーをwindowにアタッチすることで判断することができます。

jQueryでは、次のようになります。

$(window).focus(function() {
    //do something
});

$(window).blur(function() {
    //do something
});

このSOの回答から引用: https://stackoverflow.com/a/1760268/680578

解説 (5)

対応ブラウザをターゲットにしている場合は、HTML5で利用可能なPage Visibility APIを使用することができます。 これは、タブの変更を直接検出するのではなく、可視性の変更を検出します。 タブの変更を含む(ただし、これに限定されない)。

https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API][1] を参照してください。

解説 (1)

jQueryを使わない、最高のネイティブ機能。

document.hasFocus

ペンを確認し、リンク先に行き、codepenタブに戻るとどうなるかを確認します。

https://codepen.io/damianocel/pen/Yxxzdj

解説 (2)