Navigator は、現在の Web ブラウザの機能を取得するためのさまざまなプロパティと、開発者がアプリケーションに適切なブラウザを選択するのに役立つプロパティを提供するオブジェクトです。これ ' ナビゲーター 」オブジェクトは、ユーザーの環境により適した UI デザイン、フォント サイズ、インタラクションなど、現在の Web ブラウザーに関連するデータを提供する「userAgentData」という名前のプロパティを提供します。ナビゲーター オブジェクトによって提供されるプロパティは他にも多数あります。これらについては、「」で簡単に説明します。 第1条 そして 記事2 。
このブログでは、JavaScript の Navigator オブジェクトの userAgentData プロパティについて説明します。
ナビゲーターの userAgentData プロパティを把握するにはどうすればよいですか?
「」から提供される情報は、 ユーザーエージェントデータ 」プロパティを使用すると、開発者はさまざまなブラウザ環境を検索し、特定のプラットフォームで発生する可能性のある問題を特定できます。 「」からアクセスできます。 ナビゲーター ' 物体。プロパティの値「 ブランド」、「モバイル」、「プラットフォーム」 」は、「」を使用して取得できます。 ユーザーエージェントデータ Navigator オブジェクトのプロパティ。
構文
ナビゲーター「 ユーザーエージェントデータ ” プロパティの構文は次のとおりです。
ナビゲーター。 ユーザーエージェントデータ
上記の構文は、「」のようなプロパティを含む値を返します。 ブランド」、「モバイル」、「プラットフォーム」 ” は Web ブラウザーを基準にしています。
実際のデモンストレーションを確認するためのプログラムを作成してみましょう。
< 体 >< h1 スタイル = 「色: カデットブルー;」 > Linux < / h1 >< ボタン クリック時 = 「ブランド()」 > ブランドの取得 < / ボタン >
< ボタン クリック時 = '携帯（）' > モバイルの取得 < / ボタン >
< ボタン クリック時 = 'プラットホーム（）' > ブランドの取得 < / ボタン >
< 脚本 >
関数ブランド(){
console.log( navigator.userAgentData.brands )
}
関数モバイル(){
console.log('モバイルで閲覧しています: ' + navigator.userAgentData.mobile)
}
関数プラットフォーム(){
console.log('使用しているプラットフォームまたはオペレーティング システム:\n ' + navigator.userAgentData.platform)
}
< / 脚本 >
< / 体 >
上記のコード ブロックに表示されるコードの説明は次のとおりです。
- まず、3つの「<」 ボタン >」タグは、「」を呼び出すために使用されます。 ブランド()、モバイル()、プラットフォーム() 「onclick」イベントリスナーを使用したカスタムビルド関数。
- 「<」の内側 脚本 >” タグで、” を定義します ブランド ()」関数は、「navigator.userAgentData.brands」プロパティを使用して Web ブラウザーのブランド情報を取得します。また、このプロパティで取得した結果をコンソールに表示します。
- 同様に、「」を定義します。 mobile() と platform() 」機能を活用し、 navigator.userAgentData.mobile」および「navigator.userAgentData.platform」 」プロパティをそれぞれ。
- これらのプロパティは、コンソール経由で対応するデータを返します。
最終的な結果は次のようになります。
出力は、ボタンをクリックすると、対応する値が取得され、コンソール ウィンドウに表示されることを示しています。
ボーナス ヒント: Navigator の userAgent プロパティの使用
” ユーザーエージェント ” プロパティは、” によっても提供されます。 ナビゲーター 」オブジェクトを使用すると、ユーザーが使用している現在のブラウザーの名前、バージョン、プラットフォームが返されます。このナビゲーター プロパティの実際的なデモンストレーションを以下に示します。
< 体 >< h1 スタイル = 「色: カデットブルー;」 > Linuxヒント< / h1 >
< ボタン クリック時 = 「ブラウザデータ()」 > ブラウザ関連 データ < / ボタン >
< p ID = '目標' >< / p >< 脚本 >
関数ブラウザデータ ( ） { コンソール.ログ ( ナビゲーター.ユーザーエージェント ） }
< / 脚本 >
< / 体 >
上記のコードは次のように記述されます。
- まず、「< ボタン >」タグは「」と一緒に使用されます。 クリック時 「browserData()」関数を呼び出すイベントリスナー。
- 続いてはこちらの「 ブラウザデータ ()」関数は「<」内に定義されています。 脚本 >」タグ。この機能は「 ナビゲーター.ユーザーエージェント 」プロパティを使用すると、結果がコンソールに表示されます。
上記のコードの完了後の Web ページのプレビュー:
出力には、Web ブラウザーに関連するデータが取得され、コンソール ウィンドウに表示されたことが示されています。
ナビゲーターの userAgentData プロパティを把握する手順を学習しました。
結論
” navigator.userAgentData 」プロパティはブラウザ固有の値を取得します。これは、開発者が単一または複数の Web ブラウザ専用のアプリケーションを作成する場合に非常に役立ちます。このプロパティは「」の値を取得できます。 ブランド」、「モバイル」、「プラットフォーム」 ” 文字列を使用した場合、返される値はブラウザごとに異なります。文字列は「」の隣に付ける必要があります。 navigator.userAgentData ” プロパティを使用して、その文字列の値のみを返します。このブログでは、JavaScript で navigator.userAgentData プロパティを使用するプロセスを説明しました。