Wykryj Safari za pomocą jQuery


111

Chociaż obie są przeglądarkami opartymi na Webkit, Safari urlencodes w adresie URL, podczas gdy Chrome nie.

Dlatego muszę rozróżnić te dwa w JS.

Dokumenty jQuery dotyczące wykrywania przeglądarki oznaczają „safari” jako przestarzałe.

Czy istnieje lepsza metoda, czy na razie po prostu trzymam się przestarzałej wartości?


Nie wiem, czy trzymanie się tego jest dobrym pomysłem, nie sprawdziłem tego dogłębnie, chociaż właśnie przejrzałem dokumentację $ .browser na chrome i flagi $.browser.safari === true. eeek.
davin

1
możliwy duplikat Jak wykryć przeglądarki Safari, Chrome, IE, Firefox i Opera bez podsłuchiwania klienta użytkownika ?
Rob W

Odpowiedzi:


340

Używając kombinacji feature detectioni Useragentstring:

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

Stosowanie:
if (is_safari) alert('Safari');

Lub tylko dla Safari, użyj tego:

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

3
Przy stosunku 48 głosów do 5 głosów za wykrywanie funkcji z efektami ubocznymi najwyraźniej jest to zalecane rozwiązanie. :) Sprawiając, że zaakceptowała odpowiedź.
AndreKR,

1
Jako przykład tego, jak delikatne są tego typu rzeczy, ten kod nie wykrywa przeglądarki Internet Explorer 11, ponieważ zmienił się ciąg znaków UA. Zobacz msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson

1
W przeglądarce internetowej na Androida będzie również
Curtis

15
Chrome / Windows zgłosi jako Safari:(Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36)
Blaise,

6
is_explorer = (navigator.userAgent.indexOf ('MSIE')! == -1 || navigator.appVersion.indexOf ('Trident /')> 0), aby również obsługiwać IE11 >>> stackoverflow.com/a/22242528/2049986
Jacob van Lingen

74

Poniższe informacje identyfikują przeglądarkę Safari 3.0+ i odróżniają ją od Chrome:

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

1
To jest to. TNX!
Eugen Sunic

10

niestety powyższe przykłady również wykryją domyślną przeglądarkę Androida jako Safari, którą nie jest. użyłem navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1


7

Do sprawdzenia Safari użyłem tego:

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

Działa poprawnie.


3

Najwyraźniej jedynym niezawodnym i akceptowanym rozwiązaniem byłoby wykrywanie funkcji w następujący sposób:

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
Niezła sztuczka, ale niestety nie działa. Równość (location.hash == '#% 22blah% 22') nie będzie działać z powodu sposobu, w jaki location.hash traktuje ciąg. : /
Panos Kal.

1
Wykrywanie funkcji jest drogą do zrobienia, ale jest lepsza metoda, która nie ma żadnych skutków ubocznych. Twój fragment może kolidować z innymi skryptami, które opierają się na zdarzeniach zmiany skrótu. Mam pytanie oznaczone jako duplikat tego . Stworzyłem i przetestowałem tę metodę w Safari 3.0 - 5.1.3 (Mac i Windows). To jedno liniowiec :)
Rob W

2

Jedyny sposób, jaki znalazłem, to sprawdzenie, czy navigator.userAgent zawiera słowo iPhone lub iPad

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

1

Jeśli sprawdzasz przeglądarkę użyj $.browser. Ale jeśli sprawdzasz obsługę funkcji (zalecane), użyj $.support.

NIE powinieneś używać $ .browser do włączania / wyłączania funkcji na stronie. Powodem jest to, że nie jest to niezawodne i generalnie nie jest zalecane.

Jeśli potrzebujesz wsparcia funkcji, polecam modernizr .


Naucz człowieka łowić ryby ... „Czy jest lepsza metoda” - Tak, wykrywanie cech.
John Strickler

Masz na myśli coś takiego location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR

@AndreKR Dokładnie, stworzyłbym funkcję specjalnie do testowania funkcji, której szukasz.
John Strickler

2
@Greg Nie pytasz przeglądarki… testujesz przeglądarkę.
John Strickler

12
Wykrywanie funkcji jest świetne, ale co z sytuacją, gdy chcesz uniemożliwić określonej przeglądarce korzystanie z animacji CSS (na przykład), ponieważ ma wadliwą implementację? Technicznie obsługuje tę funkcję, ale chcemy podjąć decyzję o wyłączeniu jej dla tej przeglądarki, ponieważ w tym przypadku doświadczenie jest lepsze bez.
Phil Ricketts


0

Bardzo użytecznym sposobem rozwiązania tego problemu jest wykrycie wersji webkita przeglądarki i sprawdzenie, czy jest to przynajmniej ta, której potrzebujemy, w przeciwnym razie zrób coś innego.

Używając jQuery wygląda to tak:

"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.");
    };
});

Zapewnia to bezpieczne i trwałe rozwiązanie problemów z różnymi implementacjami webkitów przeglądarki.

Miłego kodowania!


0

To określi, czy przeglądarka to Safari, czy nie.

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

Niestety nie działa. Przetestowano na Chrome v66 i Safari.
Jonathan Arbely

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

Używam do wykrywania silnika przeglądarki Apple, tego prostego warunku JavaScript:

 navigator.vendor.startsWith('Apple')

0

FUNKCJA Ogólna

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.