JavaScriptのブラウザの検出

JavaScriptブラウザ検出：シンプルで効果的なソリューション

Webページの開発では、ユーザーのブラウザタイプを検出することは、ブラウザの特定のバグ、アプリケーションの互換性の修理、または最適化パフォーマンスを処理するのに非常に役立ちます。最新の開発は、ブラウザの検出ではなく特徴的な検出を提唱していますが、ユーザーが使用するブラウザを理解することは依然として実用的です。この記事では、シンプルで効果的なJavaScriptメソッドを調べて、

属性を使用してさまざまなブラウザーを検出します。 navigator.userAgent

ユーザーエイジェント文字列を理解してください

属性は、ユーザーブラウザー、オペレーティングシステム、レンダリングエンジンに関する詳細な情報を提供します。各ブラウザには一意のユーザーエージェントモードがあり、識別に使用できます。

window.navigator.userAgentたとえば：

これから、有用な情報を抽出できます。

<code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36</code>

さまざまなブラウザの検出

以下は、JavaScriptを使用してブラウザを検出する簡単な方法です。

コード詳細な説明

Microsoft Edgeを検出：

<code class="language-javascript">const userAgent = window.navigator.userAgent;
const isEdge = /Edge/.test(userAgent); // 检测Microsoft Edge
const isChrome = /chrome/i.test(userAgent) && !isEdge; // 检测Chrome，排除Edge
const isSafari = /safari/i.test(userAgent) && !isEdge; // 检测Safari，排除Edge
const isMobile = /mobile/i.test(userAgent); // 检测移动设备
const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); // 检测Windows 7上的Internet Explorer 11
const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)); // 检测旧版Safari

const isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile;</code>

1. エッジブラウザのユーザーエージェント文字列には「エッジ」が含まれています。
Google Chromeを検出：

<code class="language-javascript">const isEdge = /Edge/.test(userAgent);</code>

エッジには「クロム」も含まれているため、テスト外に除外します。
2. Safariを検出：

<code class="language-javascript">const isChrome = /chrome/i.test(userAgent) && !isEdge;</code>

これが効果的である理由は、SafariのUsaragent Stringに「Safari」が含まれているためですが、誤判断を避けるためにEdgeを除外します。

3. モバイルデバイスの検出：

<code class="language-javascript">const isSafari = /safari/i.test(userAgent) && !isEdge;</code>

モバイルブラウザには、通常、USARAGENTに「モバイル」が含まれています。

4. Windows7でインターネットエクスプローラーを検出：

<code class="language-javascript">const isMobile = /mobile/i.test(userAgent);</code>

Windows 7のUsragentには「Windows NT 6.1」が含まれており、IE 11には「RV：11」が含まれています。

Safariの古いバージョンの検出：
Safariの古いバージョンのユーザーエージェントには、「バージョン/8」または「バージョン/9」が含まれています。

<code class="language-javascript">const isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent);</code>

特定のブラウザの有効な関数：

6. これにより、この関数は、モバイルデバイスで使用されずにChrome、Safari、またはWindows 7でのみ有効になることが保証されます。
完全なコードの例

<code class="language-javascript">const isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent));</code>

結論 ブラウザ検出のユーザーエージェントは、特徴的な検出が不十分な場合に非常に役立ちます。ただし、Webアプリケーションがすべてのブラウザーで正常に実行できるようにするために、徐々に強化と優雅さを使用することが最善です。この方法により、Webアプリケーションの柔軟性を維持しながら、ブラウザの特定のソリューションまたは最適化を実装できます。プロジェクトのブラウザ互換性の問題に遭遇しましたか？コメントであなたの考えを共有してください！

以上がJavaScriptのブラウザの検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。