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

ホームページ

ウェブフロントエンド

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 までご連絡ください。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。