チャット: HTML 5 ページの可視性 API_html/css_WEB-ITnose

grants翻訳出典：http：//www.ido321.com/1126.html

オリジナルテキスト：html5ページの可視性api
translation：html 5ページの可視性api

translator：dwqs

初期の頃、ブラウザはタブを提供していませんでしたが、現在では基本的にすべてのブラウザがこの機能を提供しています。プログラマーとして、私は通常 10 ～ 15 個のタブを同時に開き、場合によっては 25 ～ 30 個のタブを開きます。

Page Visibility API を導入する理由は何ですか?

以前は、どのタブがアクティブでどのタブがアクティブでないかを判断することは不可能でしたが、HTML 5 Visibility API の助けを借りて、ユーザーが Web サイトのページを閲覧しているかどうかを検出することが可能になりました。

この記事では、HTML 5 Visibility API の使用方法を理解し、小さなデモを使用してページのステータスを確認します。このデモでは、ページの表示ステータスに基づいてドキュメントのタイトルがポップアップ表示されます。

ページの可視性を確認します

Visibility API を使用するには、まず 2 つの新しいドキュメント プロパティを理解する必要があります。1 つは document.visibilityState で、もう 1 つは document.hidden です。それらの機能は異なります。

document.visibilityState には 4 つの異なる値があります:

1. hidden: ページはどの画面にも表示されません

2. prerender: ページは読み込まれており、ユーザーには表示されません

3. ページは表示されます

4 、 unloaded: ページはアンロードされます (つまり、ユーザーは現在のページから離れます)

document.hidden はブール値で、false はページが表示されることを意味し、true はページが表示されないことを意味します。

利用可能な属性がわかったので、次はイベントをリッスンして、ページの可視性ステータスを知ることができます。これは、visibilitychange イベントを使用して行われます。例は次のとおりです。

document.addEventListener('visibilitychange', function(event) {  if (!document.hidden) {    // The page is visible.  } else {   // The page is hidden.  }});

このコードは、現在のページのステータスを検出するための Visibilitychange イベントの単純なアプリケーションです。ただし、知っておく必要があるのは、一部のブラウザーではプライベートにプレフィックスが付けられるため、すべてのプロパティとメソッドにプレフィックスを付ける必要があるということです。以下はクロスブラウザの例です:

// Get Browser-Specifc Prefixfunction getBrowserPrefix() {     // Check for the unprefixed property.  if ('hidden' in document) {    return null;  }   // All the possible prefixes.  var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];   for (var i = 0; i < browserPrefixes.length; i++) {    var prefix = browserPrefixes[i] + 'Hidden';    if (prefix in document) {      return browserPrefixes[i];    }  }   // The API is not supported in browser.  return null;} // Get Browser Specific Hidden Propertyfunction hiddenProperty(prefix) {  if (prefix) {    return prefix + 'Hidden';  } else {    return 'hidden';  }} // Get Browser Specific Visibility Statefunction visibilityState(prefix) {  if (prefix) {    return prefix + 'VisibilityState';  } else {    return 'visibilityState';  }} // Get Browser Specific Eventfunction visibilityEvent(prefix) {  if (prefix) {    return prefix + 'visibilitychange';  } else {    return 'visibilitychange';  }}

E

これで、ブラウザのすべての属性とメソッドにプレフィックスが付いているので、安心して使用できます。前のコードを調整します:

// Get Browser Prefixvar prefix = getBrowserPrefix();var hidden = hiddenProperty(prefix);var visibilityState = visibilityState(prefix);var visibilityEvent = visibilityEvent(prefix); document.addEventListener(visibilityEvent, function(event) {  if (!document[hidden]) {    // The page is visible.  } else {   // The page is hidden.  }});

Visibility API はどこで使用する必要がありますか? ️ナビゲーション ページが RSS ソースから詳細をクエリしているか、定期的に API を呼び出しています。ページがユーザーに表示されない場合は、次の状況で API の使用を検討できます:

RSS フィードまたは API への呼び出しを制限できます。

2. 一般的な手のスタイルの効果では、ページが非表示のときにその動きを制限できます。

3. 同様に、ページが非表示の場合にのみ、HTML 通知 (翻訳: http://www.ido321.com/1130.html) がユーザーに表示されます。 コードがどのように Visibility API を呼び出すかはすでにわかっています。デモを見てみましょう。

デモ

デモ1: Visibility APIを使用してページタイトルを変更する: デモを見る

デモ2: ページが表示されない場合に、サーバーから送信されるデータのクエリを制限する方法。

Demo2 では、サーバーからの更新情報のクエリをどのように制限しますか?ユーザーはページを閲覧しているだけでなく、ページに

JQuery が導入されていると仮定します。わかりやすくするためにカウントのみを示していますが、代わりに実際のサーバー データを使用することもできます。

HTML:

<!-- This element will show updated count --><h1 id="valueContainer">0</h1>

JavaScript:

<script type="text/javascript">         // Get Browser Prefix    var prefix = getBrowserPrefix();    var hidden = hiddenProperty(prefix);    var visibilityState = visibilityState(prefix);    var visibilityEvent = visibilityEvent(prefix);         var timer = null;         function increaseVal() {        var newVal = parseInt($('#valueContainer').text()) + parseInt(1);        $('#valueContainer').text(newVal);        document.title = newVal + ': Running';                 timer = setTimeout(function() {            increaseVal();        }, 1);    }         // Visibility Change    document.addEventListener(visibilityEvent, function(event) {          if (document[hidden]) {              clearTimeout(timer);              var val = parseInt($('#valueContainer').text());              document.title = val + ': Pause';          } else {              increaseVal();           }    });         increaseVal();     </script>

デモを見る

ブラウザサポート

ブラウザが Visibility API をサポートしているかどうかを知りたい場合は、「使用できますか?」にアクセスすることをお勧めします。チェックする 。ただし、ブラウザがサポートしているかどうかを検出するには、プログラミングを使用することをお勧めします。「さまざまな HTML5 機能のサポートの検出」(翻訳:

http://www.ido321.com/1116.html) を参照してください。この API は、主流の最新ブラウザーですでに十分にサポートされています

概要

先ほども言いましたが、2 つのプロパティと 1 つのイベントを含む、使用できる優れた API があります。既存のアプリケーションに簡単に統合でき、優れたユーザー エクスペリエンスを実現できます。最後に言いたいのは、ページがユーザーに表示されない場合でも、ページの動作を制御できるということです。

次の記事: 雑話: HTML 5 メッセージ通知メカニズム