logo标签列表

使用jQuery.browser区分Chrome和Safari浏览器

jquerysafarigoogle-chromewebkitbrowser-detection
31

从1.4版本开始，jQuery.browser 能够很容易地识别出webkit。但是，我该如何使用它来区分Chrome和Safari（以及反之）？

7个回答
38

不使用jQuery

isChrome = function() { 
  return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
}
isSafari = function() {
  return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
}

使用 jQuery

(以下内容不适用于jQuery 1.9及以上版本，因为jQuery.browser已从jQuery中删除。请参阅http://api.jquery.com/jQuery.browser/)

$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;
1
第一种解决方案非常优雅。 - NullVoxPopuli
为什么在 Chrome 中出现了 "!!"，这是什么意思？ - Jitender
非常遗憾，$.browser已被移除。但是自1.10以来我们如何检测呢？我在API文档中没有看到任何相关内容。 - AGamePlayer
38

由于Sarfraz没有更正他的答案（感谢Sarfraz指出正确的方向），我会在这里发布可运行的代码。

var userAgent = navigator.userAgent.toLowerCase(); 
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

// Is this a version of Chrome?
if($.browser.chrome){
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
}

// Is this a version of Safari?
if($.browser.safari){
  userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
}
3
针对Safari浏览器，使用$.browser.version得到的是Webkit引擎的版本号，而非Safari本身的版本号。可以尝试使用userAgent.indexOf('Version/') + 8来获取Safari浏览器的版本号。 - David
此外，您可以在代码行中使用空格字符而不是句点来截取子字符串，以获取完整的版本号，而不仅仅是版本号的第一部分（主要版本号），例如：userAgent = userAgent.substring(0,userAgent.indexOf(' '));。 - mkmurray
3
@David，你需要把 'Version/' 字符串中的 v 改成小写字母，在代码早期，用户代理字符串已经转换为小写字母了。 - mkmurray
2
你可以这样做：

你可以像这样：

// Is this a version of Chrome?
if($.browser.chrome){
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;
  // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
  $.browser.safari = false;
}

// Is this a version of Safari?

if($.browser.safari){
  userAgent = userAgent.substring(userAgent.indexOf('safari/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  version = userAgent;
}

http://api.jquery.com/jQuery.browser/

嗯——$ .browser.chrome未定义。而$ .browser.safari对于Chrome和Safari都为真。 - Scott Evernden
@sAc，你接近了，这段代码应该出现在你提供的代码之前：var userAgent = navigator.userAgent.toLowerCase(); $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); var version = 0; - kingjeffrey
@sAc，另外，version变量是不必要的，应该用$.browser.version替换。 - kingjeffrey
@sAc，我想接受你的答案，因为它让我找到了正确的方向 - 但只要它包含无法操作的代码，我就无法这样做。请编辑您的答案以更正上述错误。 - kingjeffrey
@kingjeffrey：我在我的回答中发布了来自jQuery文档的代码链接，这不是我编写的。任何修复都已经在这些评论中提到了 :) - Sarfraz
@sAc，你粘贴了一部分代码，但丢失了重要的上下文。虽然它指引了我正确的方向，但这种上下文的丢失使得提供的代码无法正常运行。我本想自己编辑它，但由于我的声望不够，我无法这样做。 - kingjeffrey
2
/Chrome/.test(navigator.userAgent)
2

同时适用于非使用JQuery的用户：

    navigator.userAgent.indexOf('WebKit') + 1 ? 
       ((navigator.vendor || '').indexOf('Apple') + 1 ? /* Safari */ : /* Chrome */)
    : /* not Webkit */

http://jsfiddle.net/HtWag/13/

这对我很有帮助。如果您不习惯这种条件语句，阅读起来可能有点棘手，但是您已经很好地解释了它。非常感谢。 - Scott M
1
你也可以尝试使用这种方法，这对我很有效。
    isSafari: function () 
    {
            var isSafari = (navigator.userAgent.indexOf('Safari') != -1
                        && navigator.userAgent.indexOf('Chrome') == -1)

            console.log('IsSafari : ' + isSafari);

            return isSafari;
    },
0
window.chrome?$.browser.chrome=!0:($.browser.webkit&&($.browser.safari=!0),$.browser.chrome=!1);

这个补丁添加了 $.browser.chrome，并且从 $.browser.safari 中排除了 Google Chrome 的检测。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接