JavaScript でユーザー エージェントを取得する
この記事では、エージェントの目的を説明し、JavaScript ソース コードでエージェントがどのように機能するかを説明します。 また、JavaScript プログラムでユーザー エージェントを取得する方法も確認します。
ユーザーエージェントとは
ユーザー エージェントは ナビゲーター のプロパティです。 ブラウザーからサーバーへの URL 要求中に、ブラウザーは対話している Web サイトにユーザー エージェントを送信します。
ユーザー エージェントは、ブラウザとオペレーティング システムの ID を含む文字列または行です。
ユーザー エージェント フィールドは HTTP 要求ヘッダーに含まれており、そのエージェント フィールドの内容はブラウザーによって異なる場合があります。 各ブラウザには、固有のユーザー エージェントがあります。
この情報は、Web サーバーがこれらのサービスを管理して、さまざまな Web ページをさまざまな Web ブラウザーまたはオペレーティング システムに提供するのに役立ちます。
たとえば、Web サーバーはモバイル Web ページをモバイル ブラウザに送信したり、高度な Web ページを高度な Web ブラウザに送信したりできます。 また、Web サーバーはユーザーにブラウザの更新を推奨することもできます。
ユーザー エージェント コンテンツの例を次に示します。
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041
JavaScript でユーザー エージェントを取得する
JavaScript では、アクティブなブラウザ エージェントのコンテンツを取得するカスタム関数を作成できます。 navigator プロパティ userAgent の助けを借りて、エージェント コンテンツ フィールドを見つけることができ、そのプロパティは読み取り専用です。
JavaScript での例:
<html>
<head>
<title>get agent in JavaScript</title>
</head>
<script>
function getAgent()
{
let agent = navigator.userAgent; //get agent from navigator property
document.getElementById("agent").innerHTML = "User-agent:<br>" + agent;
}
</script>
<body>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript Get Agent</h3>
<p>Click on button to get the agent</p>
<button onclick="getAgent()">Click me</button>
<p id="agent"></p>
</body>
</html>
出力：
上記のソース コードに示すように、ボタン クリック イベントによってトリガーされる let 型関数 getAgent() を <script></script> タグで宣言しました。
その関数内で、navigator プロパティ navigator.userAgent を使用してユーザー エージェント コンテンツを取得し、その文字列値を変数に格納する必要があります。 次に、HTML ドキュメントのデフォルト メソッド getElementById("agent").innerHTML を使用して、その変数を段落要素に割り当てました。
ボタン要素 Click me を作成し、クリック イベントで getAgent() 関数を呼び出して、Web ページにエージェント コンテンツを表示しました。
上記のソースを HTML の拡張子で保存し、ブラウザで開いて結果を確認できます。