26

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

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

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

4

10 回答 10

20

您也可以使用这里描述的 JS 技巧来检测浏览器是否为 IE，并使用现代异步脚本加载库来加载所需的库。耶普诺普示例：

yepnope({
  test: !+"\v1", // IE?
  yep: 'jquery.js',
  nope: 'zepto.js'
});
于 2012-01-04T21:13:15.347 回答
16

我不会使用 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。

于 2012-01-04T11:20:04.347 回答
12

正如 Zepto 文档所说，如果您需要检测 Internet Explorer，您可以使用以下代码：

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

  } else {
    // IS IE

  }

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

于 2012-05-24T10:31:22.770 回答
8

这可能是一个疯狂的想法（我不确定 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 团队的意图，这可能会更好，也可能不会更好。

于 2012-02-17T16:09:10.587 回答
8

不要使用条件注释，IE10 不支持。这是zepto 文档中推荐的方法：

在现代浏览器上加载 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>
于 2012-04-04T12:22:01.837 回答
5 
<script>
  document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>

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

于 2012-06-29T08:52:50.930 回答
1

虽然通过附加请求加载 Zepto.js 时许多现有答案都可以正常工作，但我有一种情况，我知道 Zepto 大部分时间就足够了，我只想将它与我的脚本合并，并在需要时延迟加载 jQuery。我为 Zepto 组装了一个小包装器，就可以做到这一点。

它运行“官方”'__proto__' in ...测试并在失败时延迟加载 jQuery。如果成功，则继续加载 Zepto。

我发现即使加载了 Zepto，IE8 也会崩溃。这通过跳过模块的其余部分来解决这个问题。

对于乐观的情况，没有任何额外的脚本请求。对于 jQuery 路径，无论如何，这些用户并没有完全获得快速体验。

于 2013-03-29T20:16:45.477 回答
1

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

所以，我的想法是......测试它是否支持某些 HTML5 功能，如果它不是 IE。这可能意味着较大的 jQuery 将用于更多的浏览器，但我更喜欢“工作”臃肿的代码，而不是快速下载任何内容。所以，无论如何，采用 ​​Modernizer 的 isCanvasSupported() 方法和__proto__zepto 推荐的测试，我认为这可能是一个很好的解决方案（还没有机会实际测试）：

   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

于 2013-08-12T14:32:44.517 回答
0

这就是我这样做的方式：

<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>
于 2012-03-07T18:53:27.553 回答
0

您应该稍微提高一下标准，这样不仅 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 和 A​​rray.prototype.some——所有这些都在 Zepto 中使用

picoQuery 在这里描述了这个选择：http: //picoquery.com/the_fallback

于 2016-12-07T12:26:58.167 回答