ホームページ > ウェブフロントエンド > H5 チュートリアル > ユーザーが HTML5_html5 チュートリアルのスキルでページを閲覧しているかどうかを判断する方法

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

WBOY
リリース: 2016-05-16 15:47:53
オリジナル
1719 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート