使用jQuery检测Safari


111

尽管两者都是基于Webkit的浏览器,但Safari会在URL中用引号将引号引起来,而Chrome则不会。

因此,我需要在JS中区分这两者。

jQuery的浏览器检测文档将“ safari”标记为已弃用。

有没有更好的方法,或者我现在只是坚持不赞成使用的值?


我不知道是否坚持使用它是一个好主意,尽管我只是浏览了chrome上的$ .browser文档并标记了它,但我还没有深入研究$.browser.safari === true。eek
戴文2011年

1
可能重复的方法,如何在 没有用户代理嗅探的情况下检测Safari,Chrome,IE,Firefox和Opera浏览器
罗伯W

Answers:


340

feature detection和混合使用Useragent

    var is_opera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var is_Edge = navigator.userAgent.indexOf("Edge") > -1;
    var is_chrome = !!window.chrome && !is_opera && !is_Edge;
    var is_explorer= typeof document !== 'undefined' && !!document.documentMode && !is_Edge;
    var is_firefox = typeof window.InstallTrigger !== 'undefined';
    var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

用法:
if (is_safari) alert('Safari');

或仅适用于Safari,请使用以下命令:

if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}

3
具有副作用的特征检测功能的比例为48票对5票,显然这是推荐的解决方案。:)使其成为可接受的答案。
AndreKR 2013年

1
作为这种事情有多脆弱的一个示例,此代码未检测到Internet Explorer 11,因为UA字符串已更改。参见msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson

1
Android的WebView中也说,Safari浏览器,这就是不正确
柯蒂斯

15
Chrome / Windows将报告为Safari:(Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36)
Blaise 2014年

6
is_explorer =(navigator.userAgent.indexOf('MSIE')!== -1 || navigator.appVersion.indexOf('Trident /')> 0)也支持IE11 >>> stackoverflow.com/a/22242528/2049986
Jacob van Lingen 2014年

74

以下内容可识别Safari 3.0+,并将其与Chrome区别开:

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)

1
就是这个 TNX!
Eugen Sunic '16

10

不幸的是,以上示例还将检测到android的默认浏览器为Safari,但事实并非如此。我用了 navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1


7

为了检查Safari,我使用了以下方法:

$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
    alert('this is safari');
}

它可以正常工作。


3

显然,唯一可靠且可以接受的解决方案是进行特征检测,如下所示:

browser_treats_urls_like_safari_does = false;
var last_location_hash = location.hash;
location.hash = '"blah"';
if (location.hash == '#%22blah%22')
    browser_treats_urls_like_safari_does = true;
location.hash = last_location_hash;

2
不错的把戏,但是不幸的是它不起作用。由于location.hash处理字符串的方式,所以相等性(location.hash =='#%22blah%22')将不起作用。:/
Panos Kal。

1
特征检测是必经之路,但是有一种更好的方法,它没有任何副作用。您的代码段可能会干扰其他依赖哈希更改事件的脚本。我已将此问题标记为与重复。我已经在Safari 3.0-5.1.3(Mac和Windows)中创建并测试了该方法。这是单线的:)
Rob W

2

我发现的唯一方法是检查navigator.userAgent是否包含iPhone或iPad单词

if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
    //is safari
}

1

如果要检查浏览器的使用$.browser。但是,如果您要检查功能支持(推荐),请使用$.support

您不应使用$ .browser启用/禁用页面上的功能。原因是它不可靠,通常不建议这样做。

如果您需要功能支持,那么我建议使用modernizr


教男人钓鱼...“有没有更好的方法”-是的,功能检测。
约翰·斯特里克勒

你的意思是location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');
2011年

@AndreKR确实,我将提供一个功能来专门测试您要检查的功能。
约翰·斯特里克勒

2
@Greg您没有问浏览器..您正在测试浏览器。
John Strickler

12
功能检测很棒,但是当您想要停止特定的浏览器使用CSS动画时,该怎么办呢?它在技术上支持该功能,但我们决定对该浏览器禁用该功能,因为如果不使用该功能,体验会更好。
Phil Ricketts


0

解决此问题的一种非常有用的方法是检测浏览器的Webkit版本,并检查它是否至少是我们需要的版本,否则请执行其他操作。

使用jQuery的过程如下:

"use strict";

$(document).ready(function() {
    var appVersion                  = navigator.appVersion;
    var webkitVersion_positionStart = appVersion.indexOf("AppleWebKit/") + 12;
    var webkitVersion_positionEnd   = webkitVersion_positionStart + 3;
    var webkitVersion               = appVersion.slice(webkitVersion_positionStart, webkitVersion_positionEnd);
	
    console.log(webkitVersion);

    if (webkitVersion < 537) {
        console.log("webkit outdated.");
    } else {
        console.log("webkit ok.");
    };
});

这为处理浏览器的不同Webkit实施中的问题提供了安全且永久的修复程序。

编码愉快!


0

这将确定浏览器是否为Safari。

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert(its safari);
}else {
    alert('its not safari');
}

不幸的是,它不起作用。在Chrome v66和Safari上进行了测试。
乔纳森·阿贝利

0
    // Safari uses pre-calculated pixels, so use this feature to detect Safari
    var canva = document.createElement('canvas');
    var ctx = canva.getContext("2d");
    var img = ctx.getImageData(0, 0, 1, 1);
    var pix = img.data;     // byte array, rgba
    var isSafari = (pix[3] != 0);   // alpha in Safari is not zero


0

通用功能

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.