Question

我正在使用ZeptoJS作为我的网络应用程序，但如果浏览器不支持Zepto，我想回到jQuery。由于IE是目前唯一不支持的主要浏览器，我很想检测IE：

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

但我更愿意在其他情况下具体检测Zepto支持并使用jQuery。有没有一种功能检测方法可以做到这一点？

Answer 1

您还可以使用描述here的JS技巧来检测浏览器是否为IE，并使用现代异步脚本加载库来加载所需的lib。 Yepnope示例：

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

Answer 2

我没有用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。

Answer 3

正如Zepto Documentation所说，如果您需要来检测Internet Explorer，您可以使用此代码：

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

  } else {
    // IS IE

  }

Zepto使用它来回退jQuery，但我也将它用作浏览器检测。

Answer 4

这可能是一个疯狂的想法（我不确定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; }
}

这不会捕获chrome / firefox，它可以与Zepto一起使用，但它确实符合Zepto团队对该事物的意图，这可能会或可能不会更好。

Answer 5

不要使用条件注释，IE10不会支持它。这是zepto documentation：

推荐的方法

在现代浏览器上加载Zepto，在IE上加载jQuery

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

Zepto在IE中不起作用，因为IE不支持原型，所以这是检查的正确方法。

上面的脚本执行动态加载，但逻辑是

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

  } else {
    // This is IE

  }
</script>

Answer 6

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

这是zepto.js官方网站上推荐的方法。见http://zeptojs.com/#download

Answer 7

虽然许多现有的答案在通过附加请求加载Zepto.js时工作正常，但我知道Zepto在大多数情况下都能满足，我只想将其与我的脚本合并并懒惰地加载jQuery如果需要的话。我为Zepto整理了一个小包装器就可以做到这一点。

Zepto conditional loading wrapper

它运行the "offical" '__proto__' in ... test并且如果失败则延迟加载jQuery。如果成功，则继续加载Zepto。

我发现如果Zepto被加载，IE8会爆炸。这通过跳过模块的其余部分来解决这个问题。

对于乐观情况，没有任何其他脚本请求。对于jQuery路径，那些用户并没有完全获得快速体验。

Answer 8

这是一个古老的主题，但这是我想到的，我对整体解决方案不满意。上面评论中有人提到官方的zepto测试会导致zepto转到FireFix 3.6而不是JQuery，如果可能的话，我宁愿避免使用它。

所以，我的想法是......测试它是否支持某些HTML5功能 AND 如果它不是IE。这可能意味着更大的jQuery将转到更多的浏览器，但我更喜欢“工作”膨胀的代码，以快速下载任何东西。所以，无论如何，从Modernizer获取isCanvasSupported（）方法和zepto推荐的__proto__测试，我认为这可能是一个很好的解决方案（还没有机会进行实际测试）：

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

然后，只需在document.write（）中使用该方法，如上例或任何定义jquery / zepto路径的地方。

我在快速交叉引用中看到的仅有两个浏览器版本支持画布但zepto不支持： * IOS Safari 3.2（Zepto支持4+） * Android 2.1（Zepto支持2.2+）

http://zeptojs.com/#platforms

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

Answer 9

这就是我这样做的方式：

<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>

Answer 10

你应该提高一点吧，不仅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

Zepto回退到jQuery

10 个答案: