JavaScript の userAgent 属性を使用してブラウザの種類を判断する方法

ブラウザの種類を判断するには、JavaScript で提供されている Navigator オブジェクトの userAgent 属性を使用します。これは、JavaScript を実行しているブラウザの種類やバージョンなどの情報を取得できる唯一の属性です。を使用しますが、ブラウジングを間違えるとプロセッサの順序の判断を間違いやすいので注意が必要です。

まず userAgent 属性の基本的な構文を見てみましょう

window.navigator.userAgent;

このようにして、「ブラウザ情報を記述した文字列「文字列」を戻り値として返します。

ポイントは最後まで情報を文字列として取得することです！

そのため、indexOf()などのメソッドを利用して、文字情報の中からブラウザの種類とバージョンを抽出する必要があります。

ブラウザ情報を取得するにはどうすればよいですか?

実際にブラウザの種類を取得するプログラムを作成してみましょう。

まず、userAgent 属性からブラウザ情報を取得します。

//方法①
var agent = window.navigator.userAgent;
//方法②
var agent = window.navigator.userAgent.toLowerCase();

方法①通常通りuserAgent属性を使用しますが、②最後にtoLowerCase()を実行します。

実際には、取得されるブラウザ情報は大文字と小文字が混在する文字列なので、基本的にすべて小文字か大文字かの方が判断しやすいです。

ということで、大まかに言うと②の方法で書いていきます！

var agent = window.navigator.userAgent.toLowerCase();
var result = agent.indexOf('chrome') > -1;
console.log(result);

この例では、indexOf()を利用してブラウザ情報から取得したテキスト「chrome」が存在するかどうかを確認しています。

そうでない場合は「-1」を返し、存在する場合は「文字位置」を返します。

したがって、「> -1」の比較により、「真/偽​​」が得られるので、判定することができます。

ブラウザ判定

現在主流のブラウザとして「IE」「Chrome」「Safari」「Firefox」など様々なブラウザがあります

各ブラウザがどのように判断されるかを見てみましょう。

一般的に各ブラウザ名は基本的にIF文により順番に判定されます。

var agent = window.navigator.userAgent.toLowerCase();
if(agent.indexOf('msie') > -1) { 
  console.log('IE浏览器'); 
} else if(agent.indexOf('edge') > -1) { 
  console.log('Edge浏览器');
} else if(agent.indexOf('chrome') > -1) {
  console.log('Chrome浏览器');
} else if(agent.indexOf('safari') > -1) {
  console.log('Safari浏览器');
} else if(agent.indexOf('firefox') > -1) {
  console.log('Firefox浏览器');
} else {
  console.log('其他浏览器');
}

この例では、userAgent を使用してブラウザ情報を取得し、indexOf() で各ブラウザ名を順番に決定します。

冒頭でも少し紹介しましたが、比較する順番はとても重要です！

実際、userAgent 属性を使用して Edge ブラウザを検査すると、「chrome」と「safari」という文字が含まれています。

また、Chrome に「safari」という単語が含まれていることを確認してください。

このように、本来のブラウザとは異なる名称が含まれる場合もあるため、まずは調査対象のブラウザを比較する必要があります。

基本的には「Edge」→「Chrome」→「Safari」の順番だけは確保しましょう！

以上がJavaScript の userAgent 属性を使用してブラウザの種類を判断する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。