JS の機能と UA 検出

今回は、JS の機能と UA の検出について説明します。JS の機能と UA の検出に関する注意点とは何ですか。実際のケースを見てみましょう。

最も初期のブラウザ スニッフィングは、ユーザー エージェントの検出です。サーバー (およびその後クライアント) は、ユーザー エージェント

文字列に基づいてブラウザの種類を決定します。この期間中、サーバーはユーザー エージェント文字列に基づいて、特定のブラウザによる Web サイトのコンテンツの表示を完全にブロックします。最も恩恵を受けたブラウザは Netscape ブラウザです。 Netscape (当時) が最も強力なブラウザであることは否定できません。そのため、多くの Web サイトでは、Netscape ブラウザのみが Web ページを適切に表示できると信じられていました。 Netscape ブラウザのユーザー エージェント文字列は Mozilla/2.0 (Win95; I) です。 IE が最初にリリースされたとき、基本的に、サーバーが新しいブラウザにサービスを提供できるようにするために、Netscape ブラウザのユーザー エージェント文字列の大部分を使用することが強制されました。ほとんどのユーザー エージェント検出プロセスは、「Mozilla」文字列とスラッシュの後のバージョン番号を検索するため、IE ブラウザ のユーザー エージェント文字列は Mozilla/2.0 (互換性、MSIE 3.0、Windows 95) に設定されます。泥棒だと思いますか？ IE はこのようなユーザー エージェント文字列を使用します。これは、すべてのブラウザ タイプ チェックでも、新しいブラウザが Netscape の Navigator ブラウザとして識別されることを意味します。このため、新しいブラウザが既存のブラウザのユーザー エージェント文字列を部分的にコピーする傾向にもなっています。 Chrome ディストリビューションのユーザー エージェント文字列には、Safari のユーザー エージェント文字列の一部が含まれており、Safari のユーザー エージェント文字列の一部が含まれ、さらに Firefox のユーザー エージェント文字列の一部が含まれ、さらに Firefox のユーザー エージェント文字列の一部が Netscape のユーザー エージェント文字列の一部を含みます。

UA に基づく検出は非常に信頼性が低く、維持することが困難です。Chrome として宣言されたブラウザは、別のブラウザである可能性があります

新しいブラウザが登場するたびに、または既存のブラウザのバージョン アップグレードの場合、元のコードが使用されます。 UAの検出に基づいて更新する必要があり、メンテナンスコストとエラーの確率が非常に高くなります

そのため、たとえそうする必要がある場合でも、可能な限りUAの検出を回避することをお勧めします。

2.8.2 特徴検出

ブラウザの状況に基づいて、よりスマートな方法 (検出) が必要であるため、特徴検出と呼ばれる技術が普及しました。機能検出の原則は、特定のブラウザー機能をテストし、その機能が存在する場合にのみ機能検出を適用することです。例:

// 不好的写法if (navigator.userAgent.indexOf("MSIE 7") > -1) { }// 好的写法if (
document
.getElementById) {}

機能検出は、使用されているブラウザーには依存せず、機能が存在するかどうかにのみ依存するため、したがって、必ずしも新しいブラウザのサポートが必要というわけではありません。たとえば、DOM の初期の頃は、すべてのブラウザが document.getElementById() をサポートしていたわけではなかったので、ID に基づいて要素を取得するコードは少し冗長に見えました。

// 好的写法// 仅为举例说明特性检测，现代浏览器都支持getElementByIdfunction getById (id) {  var el = null;  if (document.getElementById) { // DOM
    el = document.getElementById(id);
  } else if (document.all) { // IE
    el = document.all[id];
  } else if (document.layers) { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}

この方法は、今日のブラウザーの最新機能を検出するのにも適していますが、仕様がまだ最終決定されている段階です。一般的な Polyfill は、次のような特徴検出用のアプリケーションです。

if (!Array.isArray) {  Array.isArray = function (arr) {    return 
Object
.prototype.toString.call(arr) === '[object Array]'
  }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイト

その他の関連記事に注目してください。

推奨書籍:

Web 開発で null 比較を回避する方法

Web 開発における UI 層の疎結合

以上がJS の機能と UA 検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。