HTML5のvisibilityStateattribute_html5チュートリアルスキルの詳細な紹介と使用例

ここで、この「アクティブ化」とは、このラベルがユーザーによって閲覧されているかどうか、または現在のラベルであるかどうかを指すことを説明する必要があります。

では、この API は正確に何に使用されるのでしょうか?通常、従来のページの多くは、ユーザーがアクティブにしなくても機能し続けます。たとえば、ユーザーがニュース ポータルを閲覧しているとき、以前に開いた NBA ゲームのページは最新の結果を取得するために更新され続けます。リソースをロードし続けるため、不必要な作業が多すぎると、大量のリソースが無駄になります。したがって、この製品は非常に便利です:

1. Web プログラムは、ユーザーがタイムリーな情報を入手できるように、ページ情報を随時自動的に更新します。ただし、ユーザーが他のページを閲覧しているときは、更新を一時停止するように制御できます。
2. ビデオ Web サイトは、オンライン ビデオを再生するときに、ビデオが読み込まれるまでビデオを読み込み続けます。ただし、ユーザーが他のページを閲覧しているときは、帯域幅を節約するためにビデオ リソースの読み込みを一時停止できます。
3. Web サイトのトップページには、自動的に再生される大きなスライドショーがあり、ユーザーが他のページを閲覧すると、再生を一時停止できます。

したがって、ページの可視性を通じて、次の利点の少なくとも 1 つ以上を達成できます:

1. サーバー リソースの節約: Ajax ポーリングなどのサーバー リソースの使用は、多くの場合無視されます。
2. メモリ消費量を節約します。
3. 帯域幅の消費を節約します。

したがって、ページ可視性を使用すると、ユーザーとサーバーの両方にメリットがあります。

以下は、この API の正式な紹介です。 Page Visibility は、hidden と VisibilityState の 2 つのプロパティをブラウザのドキュメント オブジェクトに追加します。現在のタグがアクティブ化されている場合、 document.hidden の値は false になり、そうでない場合は true になります。 VisibilityState には 4 つの可能な値があります:

1.hidden: ブラウザーが最小化されている場合、タブが切り替えられている場合、またはコンピューターがロックされている場合、visibilityState 値は非表示になります
2.visible: ブラウザの最上位コンテキストのドキュメントが少なくとも 1 つの画面に表示されている場合、visible が返されます。ブラウザ ウィンドウが最小化されていないが、ブラウザが他のアプリケーションによってブロックされている場合も、visible が返されます。 3.prerender: ドキュメントが画面の外に読み込まれた場合、または非表示の場合に prerender を返します。これは必須の属性ではないため、ブラウザーはオプションでこれをサポートできます。
4.unloaded: ドキュメントが残されようとしているときに unloaded を返します (アンロード)。ブラウザはオプションでこの属性
をサポートすることもできます。

さらに、visibilitychange イベントがドキュメントに追加されます。このイベントは、ドキュメントの可視性が変更されたときにトリガーされます。

属性を紹介した後、使用例を示します (コードをコピーして HTML ファイルに保存し、それを開いてタグを切り替えて効果をテストします)。

コードをコピーしますコードは次のとおりです:

関数 browerKernel(){
var 結果;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){

if( ドキュメントの種類[接頭辞 '非表示' ] != '未定義' ){
結果 = プレフィックス;
}
});
結果を返します;
}
関数 init(){
プレフィックス = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( prefix 'visibilitychange', function onVisibilityChange(e){
var ヒント = null; if( document[ prefix 'VisibilityState' ] == 'hidden' )tip = '

ページを離れる

';
else if( document[ prefix 'VisibilityState' ] == 'visible' )tip = '

ページに入る

';
showTip.innerHTML = showTip.innerHTML ヒント;
});
}
window.onload = init();