logo标签列表

如何检测Chrome和Safari浏览器（WebKit）

javascriptjquery
65

我正在尝试使用jQuery或JavaScript检测Chrome和Safari浏览器。我认为我们不应该使用jQuery.browser。这里有什么建议吗？非常感谢！

我尝试使用jQuery或JavaScript来检测Chrome和Safari浏览器。我知道不应该使用jQuery.browser，你有什么其他的建议吗？非常感谢！
2
你可以使用jQuery.browser，但并不推荐，因为用户代理可以被欺骗。相反，建议您使用特性检测，这是无法欺骗的。 - Ian
1
它如何使用特征检测？具有相同功能的两个浏览器将给出相同的结果！ - Quentin
2
@PeeHaa 你应该学习如何使用Google和jQuery.browser：http://api.jquery.com/jQuery.browser/。它使用用户代理，并且jQuery建议使用特性检测。jQuery.browser已被弃用。 - Ian
1
@PeeHaa - 太好了。所以Chrome 27不支持FOO，但Safari支持。因此，您可以根据各种事情（包括对FOO的支持）来决定哪个是哪个。然后，Chrome 28发布并支持FOO，因此旧版本的jQuery认为Chrome 28是Safari。（这个例子说明了为什么特性检测比浏览器检测更好，以及为什么您不能使用特性检测可靠地确定浏览器 - 跟上更新很难）。 - Quentin
1
@PeeHaa，我更多地理解为“你不知道jQuery.browser使用特性检测吗？哇。真的哇。”对于误解我感到抱歉！ - Ian
显示剩余10条评论
9个回答
83
如果您不想使用$.browser，请看一下情况1，否则可能情况2和情况3可以帮助您了解信息（不建议使用$.browser，因为可以使用用户代理进行欺骗）。另一种选择是使用jQuery.support来检测功能支持而不是代理信息。
但是...
如果您坚持要获取浏览器类型（仅限Chrome或Safari）而不使用$.browser，那么情况1就是您要找的...

这符合您的要求：

情况1：（无jQuery和无$.browser，只是javascript）

演示：http://jsfiddle.net/oscarj24/DJ349/

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isChrome) alert("You are using Chrome!");
if (isSafari) alert("You are using Safari!");

这些方法以前我用过，效果不错，但是不建议使用...

方法2：（使用jQuery和$.browser方法，这个有些棘手）

演示：http://jsfiddle.net/oscarj24/gNENk/

$(document).ready(function(){

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

    /* Detect Chrome */
    if($.browser.chrome){
        /* Do something for Chrome at this point */
        /* Finally, if it is Chrome then jQuery thinks it's 
           Safari so we have to tell it isn't */
        $.browser.safari = false;
    }

    /* Detect Safari */
    if($.browser.safari){
        /* Do something for Safari */
    }

});

案例 3：（使用 jQuery 和 $.browser，"优雅"的解决方案）

演示：http://jsfiddle.net/oscarj24/uJuEU/

$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;

if ($.browser.chrome) alert("You are using Chrome!");
if ($.browser.safari) alert("You are using Safari!");
@ 在情况3下，不会误检测rockmelt和chromium吗？ - Jonathan DS
你的演示在Maxthon下失败了。它将其识别为Safari，因为它是基于Webkit的。 - Konstantin Dinev
6
JQuery不再支持.Browser，该功能已被弃用。请查看vsync的答案。 - Michael Mikhjian
1
像 .live(..) 和其他一些函数。我还写道，不建议使用它 @MichaelMikhjian - Oscar Jara
顺便提一下，$.browser.chrome = $.browser.webkit && !!window.chrome; 应该在逻辑上等同于 $.browser.chrome = $.browser.webkit && window.chrome; 我还应该注意到，Opera 在新版本中也使用 Webkit，因此 "您正在使用 Safari" 也会出现在 Opera 中。 - Steven Linn
显示剩余3条评论
72
大多数回答在这里已经过时了，不再有jQuery.browser，为什么任何人会使用jQuery或嗅探用户代理也超出了我的理解力。
相反，您应该检测一个功能是否被支持，而不是检测浏览器。
在Mozilla Firefox和Microsoft Edge中以下内容为false，在Google Chrome中为true。
"webkitLineBreak" in document.documentElement.style

注意这不是未来兼容的。浏览器随时可能实现-webkit-line-break属性，从而导致错误检测。 然后您可以在Chrome中查看文档对象，并选择任何带有webkit前缀的内容，并检查其他浏览器是否缺少该内容。

@StephenR - 你所说的不是特性检测，而是实现检测，这是另一个话题。 - vsync
我所说的是检测到一个与所有其他浏览器不同的浏览器！;-) - Stephen R
一些属性，如“scrollSnapAlign”在moz和webkit浏览器中是真实存在的，但只有在webkit中正常工作。 - Imran Bughio
@ImranBughio - 你的观点是什么？我在这个答案中的方法与检测特定功能或其“实现正确性”无关。它是一种检测Chrome/webkit的方法。由你选择一个随机属性，任何你认为独特于该供应商的属性。 - vsync
@ImranBughio - 但是这个话题只涉及到检测Chrome。如果要检测功能，您应该尝试找到另一个stackoverflow问题，因为这不是讨论功能检测的地方。我故意没有涉及功能检测，因为它是一个完全不同的主题。在此阅读更多信息。 - vsync
显示剩余4条评论
11

与其检测浏览器，你应该检测功能（是否被支持）。这正是Modernizr所做的。

当然，有些情况下你仍需要检查浏览器，因为你需要解决一个问题而非检测一个功能。以下是特定的WebKit检查，它不使用jQuery的$.browser：

var isWebKit = !!window.webkitURL;

正如一些评论所建议的那样，以上方法对于旧版本的Safari不起作用。根据评论和另一个答案提出的另一种方法进行更新：

var isWebKit = 'WebkitAppearance' in document.documentElement.style;
2
虽然您是正确的，但并非总是可行。例如，Webkit浏览器存在一个我希望解决的错误，但我无法轻易检查。我基本上只能通过检查用户代理来解决这个问题。 - kybernetikos
1
你的代码检查很好，但可能不具备未来性，因为最终webkitURL将被URL所取代。 - kybernetikos
2
window.webkitURL在旧版Safari（6.0之前）和Chrome（8.0之前）中不受支持。 - VoVaVc
1
这个答案是不正确的。Modernizr 不能告诉你有关特定于浏览器的错误，而兼容性远不止于特性检测。当您想要检测功能时，请使用特性检测；当您想要修复特定于浏览器的故障时，请使用浏览器检测。 - Morg.
1
WebkitAppearance 对我不起作用。Firefox 也被检测到了。 MDN 解释说 ff 和 ie 支持它是为了兼容性原因。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/appearance - Davious
显示剩余4条评论
9

在2019年仍然存在奇怪的问题和不一致之处。

例如，在不同浏览器之间，缩放SVG和指针事件存在差异。

这个主题的所有答案都已经失效了。(可能是那些使用了jQuery的答案)

这里提供一种替代方案，通过测试JavaScript是否支持CSS规则来检测，使用本机CSS支持API。可能会不断改进，以适应不同情况！

请注意，可以通过分号分隔的多个CSS规则传递，以进行更细致的检测。

if (CSS.supports("( -webkit-box-reflect:unset )")){
  console.log("WEBKIT BROWSER")
  // More math...
 } else {
  console.log("ENJOY")
 }

if (CSS.supports("( -moz-user-select:unset )")){
  console.log("FIREFOX!!!")
 }

注意不要在循环中使用它，为了性能最好在加载时填充一个常量：

const ff = CSS.supports("( -moz-user-select:unset )")
if (ff){ //... }

使用仅 CSS，以上内容如下：

@supports (-webkit-box-reflect:unset) {
  div {
    background: red
  }
}

@supports (-moz-user-select:unset) {
  div {
    background: green
  }
}
<div>
  Hello world!!
</div>

可能仅适用于-webkit-的CSS规则列表。

可能仅适用于-moz-的规则列表。

我能使用CSS支持吗？

3
/WebKit/.test(navigator.userAgent) — 就是这样。
2
不幸的是，新的 MS 浏览器 Edge 在 UserAgent 中存在：“Mozilla/5.0（Windows NT 10.0; Win64; x64）AppleWebKit/537.36（KHTML，like Gecko）Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240”，并且这种行为已经被官方确认 在此处。 - Gromo
1
大多数像 window.webkitURL 和 'WebkitAppearance' 的解决方案也不会将 Edge 排除在外。 - Dmitry S.
你可以通过以下方式过滤掉Edge浏览器：(/WebKit/.test(navigator.userAgent) && !/Edge/.test(navigator.userAgent)) - thenickdude
2

我想使用jQuery或JavaScript来检测Chrome和Safari浏览器。

使用jQuery.browser

我认为我们不应该使用jQuery.browser。

那是因为检测浏览器是个坏主意。如果你真的打算这么做，它仍然是检测浏览器的最佳方式（当涉及到jQuery时）。

1
你可以使用这个压缩的jQuery代码片段来检测用户是否使用移动设备进行浏览。如果你需要测试特定的设备，我在下面提供了一系列JavaScript代码片段，可用于检测各种移动手持设备，例如iPad、iPhone、iPod、iDevice、Andriod、Blackberry、WebOs和Windows Phone。
/**
 * jQuery.browser.mobile (http://detectmobilebrowser.com/)
 * jQuery.browser.mobile will be true if the browser is a mobile device
 **/

    (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas-|your|zeto|zte-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

例子用法：
if(jQuery.browser.mobile)
{
console.log(‘You are using a mobile device!’);
}
else
{
console.log(‘You are not using a mobile device!’);
}

检测iPad
var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());
if (isiPad)
{
…
}

检测iPhone。
var isiPhone = /iphone/i.test(navigator.userAgent.toLowerCase());
if (isiPhone)
{
…
}

检测iPod
var isiPod = /ipod/i.test(navigator.userAgent.toLowerCase());
if (isiPod)
{
…
}

检测iDevice 
var isiDevice = /ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase());

if (isiDevice)
{
…
}

检测安卓系统。
var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());

if (isAndroid)
{
…
}

检测黑莓。
var isBlackBerry = /blackberry/i.test(navigator.userAgent.toLowerCase());

if (isBlackBerry)
{
…
}

检测WebOS
var isWebOS = /webos/i.test(navigator.userAgent.toLowerCase());

if (isWebOS)
{
…
}

检测Windows Phone。
var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());

if (isWindowsPhone)
{
…
}
如果在正则表达式中i是不区分大小写的，为什么要将所有UA都转换为小写字母？ - Jeffrey Gilbert
为了让你不必写"黑莓"或"Windows Phone"或其他大小写敏感的内容，现在每个人都知道应该是大写还是小写，这样更直观简单。 - Hasan Al-Natour
你不懂，Hasan。 - caub
1
许多答案在这里。以下是我的第一个考虑因素。
如果没有JavaScript，包括用户为了安全目的而最初禁用JavaScript，需要由用户进行白名单处理以信任该站点，则DOM将无法使用，因为JavaScript已关闭。
从编程角度来看，您可以考虑后端服务器或前端客户端。
对于后端，您可以使用通用的HTTP“User-Agent”请求标头和/或由浏览器发出的任何可能的专有HTTP请求标头来输出特定于浏览器的HTML内容。
对于客户端，您可能希望强制执行JavaScript以允许使用DOM。如果是这样，那么您可能首先需要在HTML页面中使用以下内容：
<noscript>This site requires Javascript. Please turn on Javascript.</noscript>

虽然我们正走向一个每个网络编码人员在某种程度上都依赖于JavaScript的日子（或者不是），但现在假设每个用户都启用了JavaScript将是设计和产品开发QA错误。我见过太多的网站因为假定每个用户都启用了JavaScript而最终出现空白页面或网站崩溃。对于安全目的，他们可能会最初关闭Javascript，并且一些浏览器（如Chrome）将允许用户按域名白名单方式列出网站。Edge是我所知道的唯一一个Microsoft决定完全禁用用户关闭Javascript的浏览器。Edge不提供白名单概念，这也是我个人不使用Edge的原因之一。
使用标签是告知用户您的站点没有启用Javascript的简单方法。一旦用户打开它并刷新/重新加载页面，DOM现在可用于使用线程回复中引用的技术来检测Chrome vs Safari。
具有讽刺意味的是，我来到这里是因为我正在更新平台并谷歌同样基本的问题; Chrome vs Sarafi。我不知道Chrome创建了一个名为“chrome”的DOM对象，这确实是你需要检测“chrome”与其他所有东西的全部内容。
var isChrome = typeof(chrome) === "object";
如果为true，则表示您使用的是Chrome浏览器；如果为false，则表示您使用的是其他浏览器。

检查一下Safari是否也创建了自己的DOM对象，如果是，则获取对象名称并执行相同的操作，例如：

var isSafari = (typeof(safari) === "object");

希望这些提示能够对您有所帮助。

Edge也有window.chrome，所以这并没有帮助。 - adriendenat
0

jQuery 提供了这个：

if ($.browser.webkit){
    ...
}

更多阅读请参考http://api.jquery.com/jQuery.browser/

更新

正如其他答案或评论中所指出的那样，检查功能支持总是比代理信息更好。jQuery也提供了一个对象来做到这一点：jQuery.support。请查看文档以了解要检查哪些详细特性。

请注意，此内容已被弃用。 - CaffGeek
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接