ユーザーが HTML5_html5 チュートリアルのスキルでページを閲覧しているかどうかを判断する方法

HTML5 のページ可視性インターフェイスは、visibilitychange ページ イベントを使用して現在のページの可視性ステータスを判断し、目的を絞った方法で特定のタスクを実行できるメソッドをプログラマに提供します。新しい document.hidden プロパティも利用可能です。

document.hidden

この新しい document.hidden 属性は、そのページがユーザーによって現在表示されているページであるかどうかを示します。値は true か false です。

document.visibilityState

visibilityState の値は、表示 (ページがブラウザの現在アクティブなタブであり、ウィンドウが最小化されていないことを示す) または非表示 (ページが現在アクティブなタブ ページではない、またはウィンドウが最小化されていることを示す) のいずれかです。 .)、または事前レンダリング (ページは再生成中、ユーザーには表示されません)。

可視性変更イベント

ページの可視性の変更を聞くのは非常に簡単です:

コードをコピーします

コードは次のとおりです:

// さまざまなブラウザに対応
var hidden、状態、visibilityChange
if (typeof document.hidden !== "未定義") {
hidden = "非表示";
可視性変更 = "可視性変更";
state = "visibilityState";
else if (typeof document.mozHidden !== "未定義") {
hidden = "mozHidden";
VisibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
else if (typeof document.msHidden !== "未定義") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
else if (document.webkitHidden のタイプ !== "未定義") {
hidden = "webkitHidden";
VisibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

//タイトルにステータスの変化を表示するリスナーを追加します
document.addEventListener(visibilityChange, function() {
document.title = ドキュメント[状態];
}, false);

//初期化
document.title = ドキュメント[状態];

上記のコードは、ページの可視性が変更されたときに document.title の値を変更します。

では、visibilitychange イベントを使用する必要があるのはどのような場合でしょうか?たとえば、ページ上で埋め込みビデオを再生している場合、ユーザーが別のタブに切り替えると、タブ上のビデオは自動的に一時停止され、ユーザーが元に戻ったときに再生を再開する必要があります。別の例として、ページに自動更新アクションがある場合、ユーザーが別のタブに切り替えたときに更新を停止し、ユーザーが元に戻ったときに前のアクションを続行する必要があります。