HTML5 ページ可視性 API を使用してページ可視性制御を実装する

以前のブラウザにはタブ ブラウズ機能がありませんでしたが、現在では利用可能なブラウザをすべてチェックすると、すべてのブラウザがこの機能を提供していることがわかります。プログラマーとして、私は通常一度に 10 ～ 15 個のタブを開きますが、この数が 25 ～ 30 個を超えることもあります。

なぜこの API を使用するのですか?

以前は、どのタブがアクティブで、どのタブがアクティブであるかを判断することは不可能でしたが、HTML5 Visibility API を使用することで、訪問者が Web ページを閲覧しているかどうかを検出できるようになりました。

このチュートリアルでは、HTML5 Visibility API の処理方法と、ページの状態を確認するための簡単なデモンストレーションを学習します。このデモでは、ページの表示状態に基づいてドキュメントのタイトルを変更します。

ページの公開ステータスを確認する

この API の導入により、2 つの異なる機能を提供する 2 つの新しいドキュメント プロパティが追加されました。 1 つ目は document.visibilityState で、2 つ目は document.hidden です。

document.visibilityState には、次の 4 つの異なる値が含まれます:

• 非表示: ページはどの画面にも表示されません
• プリレンダリング: ページは画面外に読み込まれ、ユーザーには表示されません

• 表示可能: ページが表示されます

• アンロード済み: ページがアンロードされようとしています (ユーザーが現在のページから離れようとしています)

document.hidden はブール型プロパティで、ページが表示されている場合は false に設定され、ページが非表示の場合は true に設定されます。

これで、Web サイトがユーザーから非表示になったときに Web サイトがどのように動作するかを制御できるようになりました。

可用性プロパティはすぐにわかりますが、ここでイベントをリッスンして、ページの可視性に関する新しい状況を通知できるようにします。これは、visibilitychange イベントによって行われます。このイベントを処理する方法について簡単なデモを見てみましょう。

リーリー

このコードは、このイベントを利用して Web ページの現在の状態を検出する基本的な例にすぎません。ただし、一部のブラウザーではこれらのイベントとプロパティにベンダー プレフィックスが付いているため、これらのプロパティとメソッドはすべてベンダー プレフィックスを使用する必要があります。同じコードがクロスブラウザーで表示されるようになります:

リーリー

すべてのブラウザー接頭辞プロパティがあり、イベントを適用する準備ができています。これに応じて前のコードを変更します。

リーリー

この API はどこで使用できますか?

この API はさまざまなシナリオで使用することを検討できます。

1. ダッシュボード上で、ページが一定の間隔 (たとえば 2 分) で RSS フィードまたは API の詳細をポーリングしているとします。したがって、ページがユーザーに表示されていない場合 (つまり、ユーザーが実際にページを表示していない場合)、RSS フィードまたは API への呼び出しを制限できます。
2. は画像スライダーに使用されます。ページが非表示になっているときにスライダー画像の動きを制限できます。

3. 同様の方法で、ページがユーザーに対して非表示になっている場合にのみ HTML 通知を表示できます。

これまで、HTML5 Page Visibility API を使用するコードを見てきましたが、すぐに何らかのアクションを起こすときが来ました。

＃＃＃デモ＃＃＃

デモ 1: このデモでは、Page Visibility API を使用してページ タイトルを変更する方法を示します。デモを見る

• デモ 2: このデモでは、ページが非アクティブなときにサーバーからのデータのポーリングを制限する方法を示します。
このデモでは、ユーザーがページを表示している間のみ、最新情報を得るためにサーバーへのポーリングを制限する方法を見ていきます。 jQuery がすでにページに含まれていると仮定します。ここではカウントを増やすだけですが、これは実際のサーバーのポーリングに置き換えることもできます。

HTML

リーリー

JavaScript

リーリー

デモビュー

ブラウザのサポート

この API のブラウザ サポートを確認したい場合は、「Can I use it?」を確認することをお勧めします。 。ただし、プログラムでブラウザーのサポートを見つけるには、この記事を読んでさまざまな HTML5 機能のサポートを検出することをお勧めします。これまでのところ、ほぼすべての主要ブラウザと最新ブラウザでこの API が適切にサポートされています。

＃＃＃結論は＃＃＃＃＃＃

2 つのプロパティと 1 つのイベントだけで構成される非常に優れた API があると言いたいのです。このようにして、既存のアプリケーションと簡単に統合でき、ユーザー エクスペリエンスにプラスの影響を与える可能性があります。最後に、サイトがユーザーから非表示になっているときにサイトがどのように動作するかを制御できるようになりました。

以上がHTML5 ページ可視性 API を使用してページ可視性制御を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。