ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でブラウザの種類を確実に検出するにはどうすればよいですか?

JavaScript でブラウザの種類を確実に検出するにはどうすればよいですか?

DDD
リリース: 2025-01-01 08:01:10
オリジナル
742 人が閲覧しました

How to Reliably Detect Browser Type in JavaScript?

ブラウザの種類を確実に検出する方法

ブラウザ固有の拡張機能を開発する場合、ユーザーのブラウザを正確に識別することが重要です。ブラウザの種類を検出することは、各ブラウザに適切なアドオンを提供するために不可欠です。

問題の検出方法

一般的なアプローチの 1 つは、ユーザー エージェント文字列を確認することです。ただし、攻撃者がこの値を簡単に偽装できるため、この方法は信頼できません。したがって、より信頼性の高い技術を採用する必要があります。

ブラウザのダックタイピング

ダックタイピングは、ブラウザを検出するためのより信頼性の高い方法です。このアプローチを採用した JavaScript コード スニペットを次に示します。

// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
ログイン後にコピー

機能検出とブラウザ検出

可能な場合は、ブラウザ検出ではなく機能検出を選択します。機能検出には、特定の関数またはオブジェクトが存在するかどうかのチェックが含まれ、より信頼性が高くブラウザに依存しないアプローチが提供されます。

使用例

ブラウザ検出コードを利用するには、次の手順に従います。手順:

  1. JavaScript ファイルにコード スニペットを配置します。
  2. isBrowserName 変数を使用してブラウザの種類を決定します。
  3. ブラウザの種類に基づいて、ユーザーを適切なアドオン ダウンロード ページにリダイレクトします。

ブラウザ検出は必要な場合にのみ使用し、慎重に使用してください。ブラウザ固有のインストール手順の表示など。機能検出は、互換性を確保し、ユーザー エクスペリエンスを最適化するための主要なツールである必要があります。

以上がJavaScript でブラウザの種類を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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