HTML5 ページ可視性 API を使用してページ可視性制御を実装する-jsチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2023 am 08:37 AM

重写后的标题为：利用HTML5 Page Visibility 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 はさまざまなシナリオで使用することを検討できます。

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

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

＃＃＃デモ＃＃＃

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

デモ 2: このデモでは、ページが非アクティブなときにサーバーからのデータのポーリングを制限する方法を示します。

HTML

リーリー

JavaScript

リーリー

デモビュー

ブラウザのサポート

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

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

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7447

CakePHP チュートリアル

1374

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

jQueryマトリックス効果 Mar 10, 2025 am 12:52 AM

マトリックスの映画効果をあなたのページにもたらしましょう！これは、有名な映画「The Matrix」に基づいたクールなJQueryプラグインです。プラグインは、映画の古典的な緑色のキャラクター効果をシミュレートし、画像を選択するだけで、プラグインはそれを数値文字で満たされたマトリックススタイルの画像に変換します。来て、それを試してみてください、それはとても面白いです！それがどのように機能するかプラグインは画像をキャンバスにロードし、ピクセルと色の値を読み取ります。 data = ctx.getimagedata（x、y、settings.greasize、settings.greasize）.data プラグインは、写真の長方形の領域を巧みに読み取り、jQueryを使用して各領域の平均色を計算します。次に、使用します

シンプルなjQueryスライダーを構築する方法 Mar 11, 2025 am 12:19 AM

この記事では、jQueryライブラリを使用してシンプルな画像カルーセルを作成するように導きます。 jQuery上に構築されたBXSLiderライブラリを使用し、カルーセルをセットアップするために多くの構成オプションを提供します。今日、絵のカルーセルはウェブサイトで必須の機能になっています - 1つの写真は千の言葉よりも優れています！画像カルーセルを使用することを決定した後、次の質問はそれを作成する方法です。まず、高品質の高解像度の写真を収集する必要があります。次に、HTMLとJavaScriptコードを使用して画像カルーセルを作成する必要があります。ウェブ上には、さまざまな方法でカルーセルを作成するのに役立つ多くのライブラリがあります。オープンソースBXSLiderライブラリを使用します。 BXSLiderライブラリはレスポンシブデザインをサポートしているため、このライブラリで構築されたカルーセルは任意のものに適合させることができます

JavaScriptによる構造マークアップの強化 Mar 10, 2025 am 12:18 AM

キーポイントJavaScriptを使用した構造的なタグ付けの強化は、ファイルサイズを削減しながら、Webページコンテンツのアクセシビリティと保守性を大幅に向上させることができます。 JavaScriptを効果的に使用して、Cite属性を使用して参照リンクを自動的にブロック参照に挿入するなど、HTML要素に機能を動的に追加できます。 JavaScriptを構造化されたタグと統合することで、ページの更新を必要としないタブパネルなどの動的なユーザーインターフェイスを作成できます。 JavaScriptの強化がWebページの基本的な機能を妨げないようにすることが重要です。高度なJavaScriptテクノロジーを使用できます（