ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してユーザーのブラウザとそのバージョンを検出および識別するにはどうすればよいですか?

JavaScript を使用してユーザーのブラウザとそのバージョンを検出および識別するにはどうすればよいですか?

DDD
リリース: 2024-12-06 18:35:16
オリジナル
293 人が閲覧しました

How Can JavaScript Be Used to Detect and Identify User Browsers and Their Versions?

JavaScript を使用したブラウザ フィンガープリント: 総合ガイド

ユーザーのブラウザの種類とバージョンを理解することは、対象を絞った Web サイトの設計、最適化、セキュリティ対策にとって重要です。 JavaScript にはブラウザ検出のためのさまざまな方法が用意されており、開発者はコンテンツや機能をそれに応じて適応させることができます。

JavaScript でブラウザを検出する最も効果的な方法の 1 つは、navigator.userAgent プロパティを調べることです。このプロパティには、ブラウザの名前、バージョン、オペレーティング システムなどの詳細情報を含む文字列が含まれます。この文字列を解析することで、目的に応じた関連データを抽出できます。

たとえば、正確なブラウザとそのバージョンを判断するには、ユーザー エージェント文字列を精査する関数を利用できます。この関数は、提供されたコード スニペットに示すように、正規表現を使用して文字列内の特定のパターンと一致し、ブラウザとバージョンの情報を抽出できます。

navigator.saysWho = (() => {
  const { userAgent } = navigator;
  let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  let temp;

  if (/trident/i.test(match[1])) {
    temp = /\brv[ :]+(\d+)/g.exec(userAgent) || [];

    return `IE ${temp[1] || ''}`;
  }

  if (match[1] === 'Chrome') {
    temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/);

    if (temp !== null) {
      return temp.slice(1).join(' ').replace('OPR', 'Opera');
    }

    temp = userAgent.match(/\b(Edg)\/(\d+)/);

    if (temp !== null) {
      return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)');
    }
  }

  match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?'];
  temp = userAgent.match(/version\/(\d+)/i);

  if (temp !== null) {
    match.splice(1, 1, temp[1]);
  }

  return match.join(' ');
})();

console.log(navigator.saysWho); // outputs: `Chrome 89`
ログイン後にコピー

この関数は、Opera を含むさまざまなブラウザの種類とバージョンに一致します。 Chrome、Safari、Firefox、Internet Explorer。また、Chromium ベースの Edge および Trident ベースの IE の特殊なケースも処理し、幅広いブラウザ間での互換性を保証します。

このような検出方法を JavaScript アプリケーションに組み込むことで、ユーザー環境に関する貴重な洞察を得ることができます。 、ユーザー エクスペリエンスを向上させ、デバイスの機能に基づいて Web コンテンツ配信をパーソナライズします。

以上がJavaScript を使用してユーザーのブラウザとそのバージョンを検出および識別するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート