JavaScript機能の検出が失敗したとき

キーポイント

• JavaScript機能検出（プログラマーが使用したいテスト機能）は、常に信頼できるとは限りません。たとえば、Ajax要求のインターネットエクスプローラーでActiveXObjectをテスト、HTML属性はDOMプロパティにマッピングされた属性、ユーザーの動作（タッチデバイスの検出など）に関する仮定などです。
• 機能検出に失敗すると、ブラウザの検出が必要な場合があります。ただし、ナビゲーター情報の代わりに独自のオブジェクトテストを使用し、それを使用してブラウザを含めるのではなく除外することをお勧めします。
• ブラウザ検出を実装する場合は非常に注意してください。フィーチャテストと完全に一致していると仮定し、特徴が予想どおりに機能しないことがわかっている場合にのみブラウザ検出を求めてください。さらに、オブジェクトと機能テストに使用される構文は、検出の成功率に影響を与える可能性があるため、適切な構文を選択することが重要です。

昔々、ブラウザ検出はJavaScriptプログラマーの最高のスキルでした。一部の機能がIE5で機能しますが、Netscape 4では機能しないことがわかっている場合は、ブラウザをテストし、それに応じてコードを変更します。たとえば、

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

しかし、私が最初に業界に参加したとき、武器競争はすでに始まっていました！ベンダーはユーザーエージェント文字列に追加の値を追加しているため、競合他社のブラウザや独自の値のように見えます。たとえば、これはMacのSafari 5です：

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

（ビューポートに対する要素の位置を取得する）が必要な場合、ブラウザではなく、ブラウザがサポートされるかどうかが重要ですテスト機能自体よりも悪い：getBoundingClientRect この関数をサポートしていないブラウザは、「未定義の」タイプを返すため、条件は渡されません。特定のブラウザでスクリプトをテストすることなく、正しく機能するか、静かに失敗することがわかります。

または私たち…？

しかし、真実は - 機能検出が完全に信頼できるわけではありません - 時には失敗することがあります。それでは、今すぐいくつかの例を見て、各ケースを解決するためにできることを見てみましょう。

ActiveXオブジェクト

おそらく、機能検出障害の最も有名な例は、インターネットエクスプローラーでのAJAX要求のActiveXObjectをテストすることです。

ActiveXは後期のオブジェクトの例であり、実際的に重要なのは、を使用しようとするまで

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

これを修正するには、例外ハンドリングを使用する必要があります - オブジェクトをインスタンス化する必要がありますcatch fielures>それに応じて処理します。

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

にマッピングされました

の要素がDraggable APIをサポートするかどうかを確認します。 [draggable="true"]

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

が非常に混乱している理由です。なぜなら、プロパティをまったく返すのではなく、DOMプロパティを返すからです。 これは、getAttribute属性を既に持っている要素を使用する場合を意味します：

それから、それらがサポートされていなくても、IE8以前はに対して

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

属性は何でもできます：true ("draggable" in element)

に対して

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}

この場合、解決策は、テストの属性を持たない要素を使用することです。最も安全な方法は、作成された要素を使用することです。 true ユーザーの動作に関する仮定("nonsense" in element)

if ("draggable" in element) {
  // 浏览器支持拖放
}

ただし、この条件は、

の

<div draggable="true"> ... </div>

を使用して、タッチがクリックを生成するのを防ぎます。

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

これが苦痛であることを認めるが、テストする必要がないことは機能ではないことがあります - ではなく、ブラウザ - 特定のブラウザが機能しないものをサポートすると主張しているためです。最近の例は、Opera 12のsetDragImage()です（オブジェクトをドラッグアンドドロップする方法です）。 dataTransfer

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

を試してカスタムドラッグイメージを追加し、デフォルト値をサポートなしで喜んで保持したい場合（これは起こります）、これは問題ないかもしれません。ただし、アプリケーションがカスタム画像が必要な場合は、まったく異なる実装を使用する必要があるように（つまり、カスタムJavaScriptを使用してすべてのドラッグ動作を実装）する必要がある場合はどうなりますか？

またはブラウザが特定の機能を実装しているが、避けられないレンダリングエラーがある場合はどうなりますか？問題のあるブラウザを明示的に検出し、使用をサポートしようとした機能から除外する以外に選択肢がない場合があります。

問題は、ブラウザ検出を達成するための最も安全な方法は何ですか？

2つの提案があります

ナビゲーター情報よりも独自のオブジェクトテストを好む。
1. これを使用して、ブラウザを含めるのではなく除外します。
2. たとえば、

新しいブラウザがリリースされた場合、テスト結果が変更される可能性は低いため、標準オブジェクトの代わりに独自のオブジェクトを使用する方が良いです。これが私のお気に入りの例のいくつかを紹介します：window.opera

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

if (typeof window.ActiveXObject != "undefined") {
  var request = new ActiveXObject("Microsoft.XMLHTTP");
}

これらすべての黄金律は非常に注意することです。可能な限り多くのブラウザで条件をテストし、順方向の互換性を慎重に検討してください。目標は、ブラウザの条件を使用して

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}

基本的に、機能テストが完全に一致していると常に仮定します - これが当てはまらないことがわからない限り、機能は予想どおりに機能します。

if ("draggable" in element) {
  // 浏览器支持拖放
}

を選択します 終了する前に、オブジェクトとプロパティテストに使用できるさまざまなタイプの構文をチェックしたいと思います。たとえば、近年、次の構文が一般的になりました。

if (navigator.userAgent.indexOf('MSIE 5') != -1) {
  // 我们认为此浏览器是 IE5
}

<code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.59.10 (KHTML, like Gecko) Version/5.1.9 Safari/534.59.10</code>

if (typeof document.documentElement.getBoundingClientRect != "undefined") {
  // 浏览器支持此函数
}

if (typeof window.ActiveXObject != "undefined") {
  try {
    var request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (ex) {
    request = null;
  }
  if (request !== null) {
    //... 我们有一个请求对象
  }
}