Wykrywanie przeglądarki Safari

Jak wykryć przeglądarkę Safari za pomocą JavaScript? Próbowałem kodu poniżej i wykrywa nie tylko Safari, ale także przeglądarkę Chrome.

function IsSafari() {

  var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
  return is_safari;

}
Author: Kara, 2011-10-30

14 answers

Możesz łatwo użyć indeksu Chrome, aby odfiltrować Chrome:

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') > -1) {
    alert("1") // Chrome
  } else {
    alert("2") // Safari
  }
}
 74
Author: david,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-14 15:51:30

Uwaga: zawsze staraj się wykryć konkretne zachowanie, które próbujesz naprawić, zamiast kierować je za pomocą isSafari?

W ostateczności, Wykryj Safari za pomocą tego wyrażenia regularnego:

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

Używa negative look-arounds i wyklucza Chrome, Edge i wszystkie przeglądarki Android, które zawierają nazwę Safari w swoim agencie użytkownika.

 93
Author: bfred.it,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:47

Jak już zauważyli inni, wykrywanie funkcji jest preferowane niż sprawdzanie konkretnej przeglądarki. Jednym z powodów jest możliwość zmiany ciągu agenta użytkownika. Innym powodem jest to, że ciąg znaków może zmieniać i łamać kod w nowszych wersjach.

Jeśli nadal chcesz to zrobić i przetestować dla dowolnej wersji Safari, sugeruję użycie tego

var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
               navigator.userAgent &&
               navigator.userAgent.indexOf('CriOS') == -1 &&
               navigator.userAgent.indexOf('FxiOS') == -1;

Będzie to działać z dowolną wersją Safari na wszystkich urządzeniach: Mac, iPhone, iPod, iPad.

Edytuj

Aby sprawdzić w swoim aktualna przeglądarka: https://jsfiddle.net/j5hgcbm2/

Edycja 2

Zaktualizowano zgodnie z Chrome docs aby poprawnie wykryć Chrome na iOS

Warto zauważyć, że wszystkie przeglądarki na iOS są tylko opakowaniami dla Safari i używają tego samego silnika. Zobacz też bfred.it komentarz do własnej odpowiedzi w tym wątku.

Edycja 3

Zaktualizowano zgodnie z Firefox docs aby poprawnie wykryć Firefoksa na iOS

 56
Author: qingu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-26 23:17:33

Po prostu użyj:

var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
 22
Author: lukyer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-12 15:34:21

Ten kod jest używany do wykrywania tylko przeglądarki safari

if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) 
{
   alert("Browser is Safari");          
}
 15
Author: wahid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-22 05:34:05

[[4]} ponieważ userAgent dla chrome i safari są prawie takie same, łatwiej jest spojrzeć na dostawcę przeglądarki

Safari

navigator.vendor ==  "Apple Computer, Inc."

Chrome

navigator.vendor ==  "Google Inc."

FireFox (dlaczego jest pusty?)

navigator.vendor ==  ""

IE (dlaczego jest niezdefiniowany?)

navigator.vendor ==  undefined
 6
Author: tylerlindell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-01 22:06:54

Only Safari whitout Chrome:

Po wypróbowaniu innych kodów nie znalazłem żadnego, który działa z nowymi i starymi wersjami Safari.

W końcu zrobiłem ten kod, który działa bardzo dobrze dla mnie:

var ua = navigator.userAgent.toLowerCase(); 
var isSafari = false;
try {
  isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
}
catch(err) {}
isSafari = (isSafari || ((ua.indexOf('safari') != -1)&& (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1))));

//test
if (isSafari)
{
  //Code for Safari Browser (Desktop and Mobile)
  document.getElementById('idbody').innerHTML = "This is Safari!";
}
else
{
  document.getElementById('idbody').innerHTML = "Not is Safari!";
}
<body id="idbody">
</body>
 4
Author: leoledmag,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-22 20:19:35

Używam tego

function getBrowserName() {
    var name = "Unknown";
    if(navigator.userAgent.indexOf("MSIE")!=-1){
        name = "MSIE";
    }
    else if(navigator.userAgent.indexOf("Firefox")!=-1){
        name = "Firefox";
    }
    else if(navigator.userAgent.indexOf("Opera")!=-1){
        name = "Opera";
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1){
        name = "Chrome";
    }
    else if(navigator.userAgent.indexOf("Safari")!=-1){
        name = "Safari";
    }
    return name;   
}

if( getBrowserName() == "Safari" ){
    alert("You are using Safari");
}else{
    alert("You are surfing on " + getBrowserName(name));
}
 3
Author: lovepong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-20 04:26:09

Zmodyfikowany regex dla odpowiedzi powyżej

var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
  • crios-Chrome
  • fxios-Firefox
 1
Author: Yurii Sherbak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:28

Wiem, że to pytanie jest stare, ale i tak pomyślałem o wrzuceniu odpowiedzi, ponieważ może komuś pomóc. Powyższe rozwiązania zawodziły w niektórych przypadkach edge, więc musieliśmy wdrożyć je w sposób, który obsługuje iOS, Desktop i inne platformy oddzielnie.

function isSafari() {
    var ua = window.navigator.userAgent;
    var iOS = !!ua.match(/iP(ad|od|hone)/i);
    var hasSafariInUa = !!ua.match(/Safari/i);
    var noOtherBrowsersInUa = !ua.match(/Chrome|CriOS|OPiOS|mercury|FxiOS|Firefox/i)
    var result = false;
    if(iOS) { //detecting Safari in IOS mobile browsers
        var webkit = !!ua.match(/WebKit/i);
        result = webkit && hasSafariInUa && noOtherBrowsersInUa
    } else if(window.safari !== undefined){ //detecting Safari in Desktop Browsers
        result = true;
    } else { // detecting Safari in other platforms
        result = hasSafariInUa && noOtherBrowsersInUa
    }
    return result;
}
 1
Author: H H,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-08 01:22:14

Ten unikalny "problem" to 100% znak, że przeglądarka To Safari (Wierzcie lub nie).

if (Object.getOwnPropertyDescriptor(Document.prototype, 'cookie').descriptor === false) {
   console.log('Hello Safari!');
}

Oznacza to, że deskryptor obiektu cookie jest ustawiony na false w Safari, podczas gdy na wszystkich innych jest true, co w rzeczywistości przyprawia mnie o ból głowy w drugim projekcie. Szczęśliwego kodowania!

 1
Author: zoxxx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-19 22:39:44

Może to działa:

Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')

EDIT: JUŻ NIE DZIAŁA

 0
Author: Harshal Carpenter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-29 02:35:51

Zauważyłem, że tylko jedno słowo odróżnia Safari - "Wersja". Więc ten regex będzie działał idealnie:

/.*Version.*Safari.*/.test(navigator.userAgent)
 0
Author: Piotr Kowalski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-08 12:36:45

Nie wiem, dlaczego OP chciał wykryć Safari, ale w rzadkich przypadkach trzeba przeglądarkę sniffing obecnie jest prawdopodobnie ważniejsze wykrywanie silnika renderowania niż nazwa przeglądarki. Na przykład na iOS wszystkie przeglądarki używają silnika Safari/Webkit, więc nie ma sensu, aby uzyskać "chrome" lub "firefox" jako nazwę przeglądarki, jeśli podstawowym rendererem jest Safari/Webkit. Nie testowałem tego kodu ze starymi przeglądarkami, ale działa on ze wszystkim dość niedawno na Androidzie, iOS, OS X, Windows i Linux.

<script>
    let browserName = "";

    if(navigator.vendor.match(/google/i)) {
        browserName = 'chrome/blink';
    }
    else if(navigator.vendor.match(/apple/i)) {
        browserName = 'safari/webkit';
    }
    else if(navigator.userAgent.match(/firefox\//i)) {
        browserName = 'firefox/gecko';
    }
    else if(navigator.userAgent.match(/edge\//i)) {
        browserName = 'edge/edgehtml';
    }
    else if(navigator.userAgent.match(/trident\//i)) {
        browserName = 'ie/trident';
    }
    else
    {
        browserName = navigator.userAgent + "\n" + navigator.vendor;
    }
    alert(browserName);
</script>

Dla wyjaśnienia:

    Wszystkie przeglądarki pod iOS będą zgłaszane jako "safari / webkit"
  • Wszystkie przeglądarki pod Androidem, ale Firefox będą zgłaszane jako "chrome / blink"
  • Chrome, Opera, Blisk, Vivaldi itp. wszystkie będą zgłaszane jako" chrome/blink " pod Windows, OS X lub Linux
 0
Author: Christopher Martin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-21 14:25:54