web-dev-qa-db-ja.com

ZQueryからjQueryへのフォールバック

WebアプリにZeptoJSを使用していますが、ブラウザーがZeptoをサポートしていない場合はjQueryにフォールバックしたいと思います。 IEは現時点でサポートされていない唯一の主要なブラウザーであるため、IEを検出したくなります。

if(navigator.appName == 'Microsoft Internet Explorer'){
    // load jquery
} else {
    // load zepto
}

しかし、私はZeptoサポートを明確に検出し、他の場合にはjQueryを使用したいと思います。これを行う機能検出方法はありますか？

javascriptjquerybrowser-detectionzepto
26
jos3000

これは奇抜なアイデアかもしれません（Zeptoがサポートされていないブラウザーでロードされるかどうかはわかりません）が、サポートされていないブラウザーであるかどうかを確認するためにZepto独自のブラウザー検出を使用するのはどうですか？

$.os.ios      // => true if running on Apple iOS
$.os.Android  // => true if running on Android
$.os.webos    // => true if running on HP/Palm WebOS
$.os.touchpad // => true if running on a HP TouchPad
$.os.version  // => string with version number, "4.0", "3.1.1", "2.1", etc.
$.os.iphone   // => true if running on iPhone
$.os.ipad     // => true if running on iPad
$.os.blackberry // => true if running on BlackBerry

多分あなたはこのようなことをすることができます：

var isSupported = false;
for (os in $.os) {
    if ($.os[os] == true) { isSupported = true; }
}

これは、Zeptoで正常に動作するchrome/firefoxをキャッチしませんが、Zeptoチームの目的に対する意図と一致します。

8
SimplGy

また、説明されているJSトリック here を使用して、ブラウザがIEかどうかを検出し、最新の非同期スクリプトロードライブラリを使用して必要なlibをロードすることもできます。 Yepnope の例：

yepnope({
  test: !+"\v1", // IE?
  yep: 'jquery.js',
  nope: 'zepto.js'
});
20
phil pirozhkov

それをJavaScriptで行うのではなく、一歩先に進み、条件付きステートメントを使用します。これは次のようになります。

<!--[if lt IE 8 ]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<![endif]-->

<!--[if !IE]>
    <script src="/js/zepto.js"></script>
<![endif]-->

これはHTMLファイルに直接入ります。ブラウザーがInternet Explorer 7以下の場合、上記のスニペットはjQueryをロードします。それ以外の場合は、zepto.jsが含まれます。

16
jAndy

Zepto Documentationが言ったように、必要な場合Internet Explorerを検出するには、このコードを使用できます：

  if ('__proto__' in {}) {
    // IS NOT IE

  } else {
    // IS IE

  }

ZeptoはjQueryにフォールバックするためにそれを使用しますが、ブラウザーの検出としても使用しています。

12
Jaime Fernandez

条件付きコメントは使用しないでください。IE10ではサポートされません。これは zeptoドキュメント からの推奨アプローチです：

Zeptoを最新のブラウザにロードし、jQueryをIEにロードします

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

IEでZeptoは機能しませんIEはprototypeをサポートしていません）なので、これはまさに正しいチェック方法です。

上記のスクリプトは動的ロードを実行しますが、ロジックは

<script>
if ('__proto__' in {}) {
  // This is NOT IE

  } else {
    // This is IE

  }
</script>
8
gagarine
<script>
  document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>

これは、zepto.js公式サイトで推奨される方法です。参照 http://zeptojs.com/#download

5
Ale

追加のリクエストを介してZepto.jsをロードすると、既存の回答の多くが正常に機能しますが、ほとんどの場合Zeptoで十分であり、それをスクリプトとマージして、必要に応じてjQueryを遅延ロードしたいという状況があります。私はZeptoの小さなラッパーを組み合わせてそれを行います。

実行 "公式" '__proto__' in ... test そして、失敗した場合、レイジーはjQueryをロードします。成功した場合、Zeptoのロードを続行します。

Zeptoがロードされている場合でもIE8が爆発することがわかりました。これは、モジュールの残りをスキップすることで修正します。

楽観的なケースでは、追加のスクリプトリクエストはありません。とにかく、jQueryパスについては、これらのユーザーはとにかく高速なエクスペリエンスを実現していませんでした。

1
mckamey

これは古いトピックですが、私が思いついたのはそれであり、ソリューション全体に満足できませんでした。上記のコメントの誰かが、公式のzeptoテストの結果、jQueryの代わりにFireFix 3.6にzeptoが移行することになると述べています。これは可能な限り避けたいと思います。

だから、私の考えは...それがいくつかのHTML5機能[〜＃〜]および[〜＃〜]をサポートしているかどうかをテストして、それがIEでない場合。これは、より大きなjQueryが本来よりも多くのブラウザーにアクセスすることを意味するかもしれませんが、私は何も素早くダウンロードするよりも「機能する」肥大化したコードを好むでしょう。したがって、とにかく、ModernizerのisCanvasSupported（）メソッドとzeptoが推奨する__proto__テストを使用すると、これは良い解決策になると思います（まだ実際にテストする機会がありませんでした）。

   var isHtml5AndNotIE     = function() {
        var elem = document.createElement('canvas');
        return '__proto__' in {} && !!(elem.getContext && elem.getContext('2d'));
    };

次に、上記の例のように、またはjquery/zeptoへのパスを定義している場所で、document.write（）でそのメソッドを使用します。

Canvasをサポートしているが、zeptoでサポートされていない、簡単な相互参照で表示できる2つのブラウザーバージョンは次のとおりです。* IOS Safari 3.2（4+はZeptoでサポートされています）* = Android 2.1（2.2以降はZeptoでサポートされています）

http://zeptojs.com/#platforms

http://caniuse.com/#feat=canvas

1
Kevin Nelson

IE8がjQueryを取得するだけでなく、他の古いブラウザーも取得できるように、少しレベルを上げる必要があります。たとえばZeptoには、Array.prototype.someなどの機能が必要です。

Zeptoには picoQuery （Zeptoの代替手段）とほぼ同じ機能が必要です。 picoQueryでは、次のようになります。

if (Array.isArray) {
   // Modern browser
   // (FF4+, IE9+, Safari 5+, Opera 10.5+, Konq 4.9+, Chrome 5+, etc)
   document.write("<script src='/js/zepto.min.js'></script>");
}
else {
   document.write("<script src='/js/jquery.js'></script>");
}

互換性の表から、Array.isArrayをサポートするすべてのブラウザーがquerySelectorAll（）、addEventListener（）、dispatchevent、Array.prototype.indexOfおよびArray.prototype.someもサポートすることがわかります。これらはすべてZeptoで使用されます

picoQueryはこの選択をここで説明します： http://picoquery.com/the_fallback

0
rosell.dk

これは私がそれをする方法です：

<script type="text/javascript">
if(top.execScript){ // true only in IE
    document.write("<script src='/js/jquery.js'>\x3C/script>");
}
else{
    document.write("<script src='/js/zepto.min.js'>\x3C/script>");
}
</script>
0
Timbo White