27

JavaScript hashchangeイベントを使用して、URLのフラグメント識別子の変更を監視することに興味があります。私はReallySimpleHistoryとこのためのjQueryプラグインを知っています。ただし、私の特定のプロジェクトでは、別のJSファイルのオーバーヘッドを追加する価値はないという結論に達しました。

代わりに私がやりたいのは、「プログレッシブエンハンスメント」ルートを取ることです。つまり、hashchangeイベントが訪問者のブラウザーでサポートされているかどうかをテストし、利用可能な場合はコア機能ではなく拡張機能として使用するコードを記述します。IE 8、Firefox 3.6、およびChrome 4.1.249はこれをサポートしており、これが私のサイトのトラフィックの約20％を占めています。

それで、ええと...ブラウザが特定のイベントをサポートしているかどうかをテストする方法はありますか？

4

4 に答える 4

33

さて、最善のアプローチはブラウザのスニッフィングを経由しないことです。JuriyZaytsev（@kangax）は、イベントサポートを検出するための非常に便利な方法を作成しました。

var isEventSupported = (function(){
  var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
  }
  function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
      el.setAttribute(eventName, 'return;');
      isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
  }
  return isEventSupported;
})();

使用法：

if (isEventSupported('hashchange')) {
  //...
}

この手法は現在、 jQueryなどの一部のライブラリで使用されています。

詳細はこちら：

于 2010-05-20T20:10:08.950 に答える
24

Mozillaのドキュメントは、次のことを示唆しています。

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

これはIE8とChrome5ベータ版でも機能し（Chrome 4.1はテストしていません）、OperaとSafariでは正しく失敗します。

于 2010-05-20T20:17:59.410 に答える
0

typeof最も簡単な解決策は、イベント クラスをチェックすることだと思います。

例: Chrome とInternet Explorer でtypeof(InputEvent)返されます。"function""undefined"

于 2021-11-08T22:22:20.627 に答える