HTML5 ページ可視性 API を探索する-＆＃＆プレス-php.cn

ホームページ

CMS チュートリアル

＆＃＆プレス

HTML5 ページ可視性 API を探索する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 28, 2023 pm 07:33 PM

htmlページ可視性 APIプログラミングを探索する

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 はさまざまなシナリオで使用することを検討できます。

ダッシュボード上で、ページが一定の間隔 (たとえば 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 までご連絡ください。

2025年に使用するトップ9のWordPressテーマApr 17, 2025 am 08:26 AM

2025年には、完璧なWordPressテーマを選択することはもはや優先事項ではありません。本当の課題は、現在のプロジェクトのニーズを満たし、将来のニーズの進化に適応するのに十分な柔軟性のあるトピックを選択することです。良いニュースは、あなたがゼロから始める必要がないということです。顧客のためにウェブサイトを構築している場合でも、独自のデジタル製品を拡大している場合でも、次のトピックは、設計の自由、技術的パフォーマンス、長期的な信頼性の理想的なバランスをとっています。これらのトピックは、重要な要素を理解する開発者によって構築されています。定期的な更新、クリーンコード、モバイルファーストレスポンシブデザイン、およびElementor、Gutenberg、WooCommerceなどの既に使用しているツールとの互換性。このレビューでは、スコープを9に縮小しました

WordPressブログを始める方法：初心者向けのステップバイステップガイドApr 17, 2025 am 08:25 AM

ブログは、人々が自分の意見、意見、意見をオンラインで表現するための理想的なプラットフォームです。多くの初心者は自分のウェブサイトを構築することに熱心ですが、技術的な障壁やコストの問題を心配することをためらっています。ただし、プラットフォームが初心者の能力とニーズを満たすために進化し続けるにつれて、今まで以上に容易になり始めています。この記事では、テーマの選択からプラグインの使用まで、セキュリティとパフォーマンスを向上させ、独自のWebサイトを簡単に作成できるように、WordPressブログを構築する方法を段階的に導きます。ブログのトピックと方向を選択してくださいドメイン名を購入したり、ホストを登録する前に、カバーする予定のトピックを特定することをお勧めします。個人的なウェブサイトは、旅行、料理、製品のレビュー、音楽、またはあなたの興味を引き起こす趣味を中心に展開できます。あなたが本当に興味を持っている領域に焦点を当てることは継続的な執筆を奨励することができます

WordPressを3日で学ぶことはできますか？Apr 09, 2025 am 12:16 AM

3日以内にWordPressを学ぶことができます。 1.テーマ、プラグインなどのマスター基本知識。2。インストールや作業原則などのコア関数を理解します。 3.例を使用して、基本的および高度な使用法を学びます。 4.デバッグテクニックとパフォーマンスの最適化の提案を理解します。

WordPressはCMSですか？Apr 08, 2025 am 12:02 AM

WordPressはコンテンツ管理システム（CMS）です。コンテンツ管理、ユーザー管理、テーマ、プラグイン機能を提供して、Webサイトコンテンツの作成と管理をサポートします。その実用的な原則には、ブログから企業Webサイトまで、さまざまなニーズに適したデータベース管理、テンプレートシステム、プラグインアーキテクチャが含まれます。

ワードプレスは何に適していますか？Apr 07, 2025 am 12:06 AM

wordpressisisgoodforvirtalayanywebprojectoitsversitilityasacms.itexcelsin：1）ユーザーフレンドリー、柔軟性と柔軟性と顧客化の維持、およびプルージンの数値化; 3）seooptimization;

WixまたはWordPressを使用する必要がありますか？Apr 06, 2025 am 12:11 AM

WIXは、プログラミングの経験がないユーザーに適しており、WordPressは、よりコントロールと拡張機能を必要とするユーザーに適しています。 1）WIXはドラッグアンドドロップエディターとリッチテンプレートを提供しているため、Webサイトをすばやく構築できます。 2）オープンソースのCMSとして、WordPressには巨大なコミュニティとプラグインエコシステムがあり、詳細なカスタマイズと拡張をサポートしています。

WordPressの費用はいくらですか？Apr 05, 2025 am 12:13 AM

WordPress自体は無料ですが、使用するには余分な費用がかかります。1。WordPress.comは、無料から支払いまでの範囲のパッケージを提供し、価格は月あたり数ドルから数十ドルまでの範囲です。 2。WordPress.orgでは、ドメイン名（年間10〜20米ドル）とホスティングサービス（月額5〜50米ドル）を購入する必要があります。 3.ほとんどのプラグインとテーマは無料で、有料価格は数十から数百ドルです。適切なホスティングサービスを選択し、プラグインとテーマを合理的に使用し、定期的に維持および最適化することにより、WordPressのコストを効果的に制御および最適化できます。