コメント:ユーザーが指定されたタブを閲覧しているかどうかを判断する方法を長い間欠いていました。ユーザーは他のウェブサイトにアクセスしましたか?彼らは戻ってきましたか?
これで、HTML5のページVisiabilityインターフェイスは、プログラマーにVisibilityChangeページイベントを使用して現在のページの可視性ステータスを判断し、ターゲットを絞った方法で特定のタスクを実行する方法を提供します。新しいdocument.hiddenプロパティも使用できます。
document.hidden
この新たに表示されているdocument.hiddenプロパティは、ページが現在ユーザーによって表示されているページであるかどうかを示しています。
document.visibilityState
VisitibilityStateの値が表示されます(ページが現在ブラウザによってアクティブ化され、ウィンドウが最小化されていないことを示します)、または非表示(ページは現在タブページでアクティブ化されていないか、ウィンドウが最小化されていません。)
bivibilitychangeイベント
ページの可視性の変更を聞くのは非常に簡単です。
//さまざまなブラウザと互換性があります
var hidden、state、visibilitychange;
if(typeof document.hidden!== "undefined"){
hidden = "hidden";
visibilitychange = "visibilitychange";
state = "visibilitystate";
} else if(typeof document.mozhidden!== "undefined"){
hidden = "mozhidden";
visibilitychange = "mozvisibilitychange";
state = "mozvisibilitystate";
} else if(typeof document.mshidden!== "未定義"){
hidden = "mshidden";
visibilitychange = "msvisibilitychange";
state = "msvisibilitystate";
} else if(typeof document.webkithidden!== "undefined"){
hidden = "webkithidden";
visibilitychange = "webkitvisibilitychange";
state = "webkitvisibilitystate";
} </p> <p> //リスナーを追加してタイトルにステータスの変更を表示する
document.addeventlistener(visibilitychange、function(){
document.title = document [state];
}、false); </p> <p> //初期化
document.title = document [state];
上記のコードは、ページの可視性が変更されたときにdocument.titleの値を変更します!
では、いつvisibilitychangeイベントを使用する必要がありますか?たとえば、再生中のページに埋め込まれたビデオがある場合、ユーザーが別のタブに切り替えると、タブ上のビデオが再生を自動的に一時停止し、ユーザーが戻ってきたときに再生を続けます。たとえば、ページに自動更新アクションがある場合、ユーザーが他のタブに切り替えると、更新を停止し、ユーザーが戻ってきたら以前のアクションを続行する必要があります。