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?

AndreKR
źródło
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');}
Panos Kal.
źródło
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/)
brissmyr
źródło
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

user3107045
źródło
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.

FlamyTwista
źródło
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;
AndreKR
źródło
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
}
ohrlando
źródło
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 .

John Strickler
źródło
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
1
//Check if Safari
  function isSafari() {
      return /^((?!chrome).)*safari/i.test(navigator.userAgent);
  }
//Check if MAC
     if(navigator.userAgent.indexOf('Mac')>1){
        alert(isSafari());
     }

http://jsfiddle.net/s1o943gb/10/

Code Spy
źródło
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!

reicek
źródło
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');
}
Dushyant Dagar
źródło
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
Witalij
źródło
0

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

 navigator.vendor.startsWith('Apple')
Daniel De León
źródło
0

FUNKCJA Ogólna

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
user1330204
źródło