Safari tarayıcısını algıla

142

JavaScript kullanarak Safari tarayıcısı nasıl algılanır? Aşağıdaki kodu denedim ve sadece Safari'yi değil, aynı zamanda Chrome tarayıcısını da algılıyor.

function IsSafari() {

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

}
javascript  browser-detection 
— Tomas
kaynak
1
Dosya gönderme ile ilgili JS kodlarından bazıları Safari için farklı çalışır, Chrome için iyi çalışır.
— Tomas
1
Neredeyse kesinlikle API'lardaki farklılıklar için test yapmalısınız. Safari ve Chrome'un ötesinde başka WebKit tabanlı tarayıcılar da var.
— Quentin
12
Bir kişinin tarayıcıyı algılamak istemesinin birçok nedeni olabilir. Örneğin, bu yazı itibariyle SVG motorunun filtreler gibi belirli yönleri Safari'de kırık, ancak Chrome'da çalışıyor.
— Paul Legato
Bazen hatayı düzeltemezsiniz çünkü yeniden üretemezsiniz (Mac'e erişimim yok). Midori'deki sorunu (sendAsBinary şim için bazı BlobBuilder / Blob sorunu) çözdüm, ancak istemci dosya yüklemeyle ilgili bir sorun olduğunu söylüyor, bu yüzden düşünebileceğim en iyi şey sadece Safari desteğini kaldırmak ve bunun için iframe'leri kullanmaktır. eski IE)
— llamerr
1
— anik4e

Yanıtlar:

110

Chrome'u filtrelemek için kolayca Chrome dizinini kullanabilirsiniz:

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') > -1) {
    alert("1") // Chrome
  } else {
    alert("2") // Safari
  }
}
— david
kaynak
6
Çalışmıyor. Şu anda iPhone'da krom UA dizesi çıktı ve hatta "krom" kelimesi bile yok.
— Paul Carlton
5
Windows 10'daki IE 11 UA dizesi ayrıca Safari ve Chrome'u da içeriyor
— cuixiping
Blackberry ayrıca "Safari" içerir.
— Harry Pehkonen
18
@Flimm Tarayıcı algılaması için birçok yasal kullanım durumu vardır. Asker veya cevaplayıcının niyetini bildiğinizi varsaymayın. Alakalı olduğuna inandığınız yararlı bir ipucu eklemek harika olsa da, kesinlikle bir gereklilik değildir.
— Ruben Martinez
1
Bu, "safari" içeren ancak "krom" içermeyen Android tarayıcılarda çalışmaz: developers.whatismybrowser.com/useragents/explore/software_name/…
— Eric Andrew Lewis
156

Not: her zaman düzeltmeye çalıştığınız davranışı, hedeflemek yerine tespit etmeye çalışın.isSafari?

Son çare olarak Safari'yi şu normal ifadeyle tespit edin:

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

Negatif bakışlar kullanır ve Chrome, Edge ve Safarikullanıcı aracılarında adı içeren tüm Android tarayıcıları hariç tutar .

— fregante
kaynak
2
Bu işe yaramıyor. Bir iPhone'da Chrome Tarayıcı kullanıyorsanız hala gerçek oluyor.
— ayjay
27
Bunun nedeni, iOS'taki tüm tarayıcıların yalnızca Chrome dahil olmak üzere Safari için ( Mini modda Opera Mini hariç) sarmalayıcıları olmasıdır . Bu , userAgent dizesi sarmalayıcıya geldiğinden, bunların hepsinin bu testle eşleşeceği anlamına gelmez . İOS'ta Chrome'u ayrı olarak tespit etmek isteyebilirsiniz .
— fregante
Dostum bu benim için çalıştı !!! Teşekkürler .. navigator.userAgent, Windows'ta hem Chrome hem de Mac'te Safari için "5.0 (Windows NT 6.1) AppleWebKit / 537.36 (Gecko gibi KHTML) Chrome / 39.0.2171.99 Safari / 537.36" gibi değerler döndürüyordu.
— KaustubhSV
2
Şimdi düzeltildi. Kesinlikle haklısın, birçok tarayıcıyla ilgili sorun, dışarıda kalmamaya çalışmak için başka isimler içermeleri. Like Edge, UA'sında Chrome ve Safari'yi içeriyor. Kullanıcı aracısı denetimleri bu nedenle kötü: tarayıcılar değişiyor ve denetimlerin güncellenmesi gerekiyor. Ne yazık ki bir tarayıcıyı tespit etmenin mükemmel bir yolu yok, her zaman bir tahmin.
— fregante
1
Özellik algılamayı kullanmak için kesinlikle iyi bir fikir, ancak bazı davranışların test edilmesi zor veya neredeyse imkansız, örneğin mobil cihazlardaki videoların otomatik olarak tam ekrana geçip geçmediği, sadece iPhone ve iPod'da gerçekleşen bir şey. Test etmek için bir video yüklemeniz ve kullanıcının oynatmasını sağlamanız gerekir.
— fregante
91

Diğer kişilerin de belirttiği gibi, belirli bir tarayıcıyı kontrol etmekten çok özellik algılama tercih edilir. Bunun bir nedeni, kullanıcı aracısı dizesinin değiştirilebilmesidir. Diğer bir neden ise dizenin kodunuzu daha yeni sürümlerde değiştirip bozmasıdır.

Hala yapmak ve herhangi bir Safari sürümünü test etmek istiyorsanız, bunu kullanmanızı öneririm

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

Bu, tüm cihazlarda Safari'nin herhangi bir sürümü ile çalışır: Mac, iPhone, iPod, iPad.

Düzenle

Mevcut tarayıcınızda test etmek için: https://jsfiddle.net/j5hgcbm2/

Düzenle 2

İOS'ta Chrome'u doğru bir şekilde algılamak için Chrome dokümanlarına göre güncellendi

İOS'taki tüm Tarayıcıların sadece Safari için paketleyici olduğunu ve aynı motoru kullandığını belirtmek gerekir. Bu konudaki kendi cevabı hakkındaki bfred.it yorumuna bakınız.

Düzenle 3

İOS'ta Firefox'u doğru bir şekilde algılamak için Firefox dokümanlarına göre güncellendi

— qingu
kaynak
Yorum için teşekkürler - iOS'ta Chrome'u doğru bir şekilde tespit etmek için güncellendi
— qingu
@qingu - Bu javascript anlamıyorum, nasıl bir şey yapmak istiyorum - if (safaribrowser) {bunu yapmak} else {aynı} kullanarak aynı değeri kullanarak 'var isSafari' teşekkürler
— GAV
@GAV: Aksi takdirde Safari tarayıcısında isSafariolacaktır . Yukarıdaki kod parçasını kullanabilir ve ardından hemen hemen yayınladığınız gibi kullanabilirsiniz. . truefalseif (isSafari) { do_this(); } else { do_that(); }
— qingu
2
Ne yazık ki, tarayıcıyı anlamaya çalışmak için özellik algılamadan daha fazla neden var. Tarayıcı bir özelliği destekleyebilir, ancak buggy olabilir (ör: IE10'da tuval hatası, ancak aynı özellik IE9'da da çalışır). Ayrıca Firefox, fare hareketine nasıl tepki verdiği gibi webkit tabanlı tarayıcılardan farklı davranır. Apple Safari'de Chrome'da bulunmayan yeniden akış hataları var. Bazı tarayıcılar, diğerlerinden daha fazla hesaplamalı yoğun görevler yaparken de performans gösterir.
— DemiImp
2
@Andras Firefox && !navigator.userAgent.match('FxiOS')için Chrome çekine benzer ekleyebilirsiniz - ref ( developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/… )
— Petri Pellinen 6:18
60

Sadece kullan:

var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
— lukyer
kaynak
15
Bu neden daha yüksek değil emin değilim - bu mükemmel, kısa ve basit. Masaüstü safarisini yoksun bırakmam gerekiyordu getUserMedia.
— Stephen Tetreault
3
Bu mobil çalışmaz gibi masaüstü safari belirlemek için mükemmel bir yoldur
— godblessstrawberry
Bu hangi Safari sürümleri için çalışıyor? V5.1.7
— ElliotSchmelliot
Mobil ve masaüstünü değil, yalnızca tarayıcıları önemsiyorsanız, bu mükemmel çalışır.
— Antuan
1
Bu iPhone 11 Pro Max Simulator 13.5 içinde işe yaramadı
— Christian Valentin
19

Bu kod yalnızca safari tarayıcısını tespit etmek için kullanılır

if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) 
{
   alert("Browser is Safari");          
}
— wahid
kaynak
4
bu kod yalnızca bir webkit tarayıcısının krom olup olmadığını algılar. Diğer birçok tarayıcı, kullanıcı aracısı dizesine "safari" eklemekle ilgili kötü bir fikre sahiptir. Örneğin, Opera: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36 OPR/24.0.1558.51 (Edition Next)veya Stok Android tarayıcısı:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24
— 15:14
savurma platformu algılaması, belirli uyumluluk durumlarını filtreleyebilir.
— ljgww
Yarım düzine üçüncü taraf iOS tarayıcısını kontrol ettim, hepsi Safari Kullanıcı Aracısını tam olarak taklit ediyor.
— Mitch Maçı
Böylece bu yalnızca Chrome'u algılar. Yine de, Chrome 44'ün artık UA'da Chrome olmadığını, bunun yerine 'CriOS' olduğunu öğrendim :(
— Mitch Match
Her zaman özellik algılama yapmaya çalışmalıyız ve tarayıcı algılamayı son çare olarak kullanmalıyız, çünkü ikincisi meşru kullanıcıları kırma ve engelleme olasılığı daha yüksektir. Özellik algılamadan hiç bahsetmeyen herhangi bir cevap benden aşağı oy alıyor.
— Kasım'da
12

Chrome ve safari için userAgent neredeyse aynı olduğundan, tarayıcı satıcısına bakmak daha kolay olabilir

Safari

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

Krom

navigator.vendor ==  "Google Inc."

FireFox (neden boş?)

navigator.vendor ==  ""

IE (neden tanımsız?)

navigator.vendor ==  undefined
— tylerlindell
kaynak
1
Çeşitli bilgisayarlarda (mac masaüstü, ipad, vb) iş yerinde safari uyarı mesajları devre dışı bırakmak için bir şey arıyordum ve bu mükemmel çalıştı.
— dylnmc
Ancak iOS'ta Chrome satıcısı da "Apple Computer, Inc." olacaktır. Üzgünüm ...
— Piotr Kowalski
@PiotrKowalski - hangi çözümle gittiniz?
— tylerlindell
@tylerlindell Cevabımı bu sayfanın alt kısmında "sürüm" kelimesiyle görün.
— Piotr Kowalski
7

Yalnızca Chrome olmadan Safari :

Başkalarının kodlarını denedikten sonra Safari'nin yeni ve eski sürümleriyle çalışan herhangi bir kod bulamadım.

Sonunda, benim için çok iyi çalışan bu kodu yaptım:

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>
Snippet'i genişlet

— leoledmag
kaynak
5

Ben sadece bir kelime Safari - "Versiyon" ayırt gözlemledim. Yani bu normal ifade mükemmel olacak:

/.*Version.*Safari.*/.test(navigator.userAgent)
— Piotr Kowalski
kaynak
5

OP'nin neden Safari'yi tespit etmek istediğini bilmiyorum, ancak nadir durumlarda günümüzde tarayıcı koklamaya ihtiyacınız var, render motorunu tespit etmek tarayıcının adından daha önemli. Örneğin iOS'ta tüm tarayıcılar Safari / Webkit motorunu kullanır, bu nedenle alttaki oluşturucu aslında Safari / Webkit ise tarayıcı adı olarak "chrome" veya "firefox" almak anlamsızdır. Bu kodu eski tarayıcılarla test etmedim, ancak Android, iOS, OS X, Windows ve Linux'ta oldukça yeni olan her şeyle çalışıyor.

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

Netleştirmek için:

  • İOS altındaki tüm tarayıcılar "safari / webkit" olarak bildirilecek
  • Android, ancak Firefox altındaki tüm tarayıcılar "chrome / blink" olarak bildirilecek
  • Chrome, Opera, Blisk, Vivaldi vb. Windows, OS X veya Linux altında "chrome / blink" olarak rapor edilecektir
— Christopher Martin
kaynak
4

Bunu kullanıyorum

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));
}
— lovepong
kaynak
4

En basit cevap:

function isSafari() {
 if (navigator.vendor.match(/[Aa]+pple/g).length > 0 ) 
   return true; 
 return false;
}
— SudarP
kaynak
2
navigator.vendor.toLowerCase().indexOf('apple') > -1
— Regexp
5
Hatta daha basit ... if (navigator.vendor.match(/apple/i)) { ... }.
— Brad
Bu, Apple Computer, inc
— nuttynibbles
1
@nuttynibbles: Bu muhtemelen istediğiniz şeydir çünkü iOS'taki her tarayıcı kılık değiştirmiş bir Safari'dir.
— wortwart
3

Kayıtlar için bulduğum en güvenli yol, tarayıcı algılama kodunun Safari bölümünü bu yanıttan uygulamaktır :

const isSafari = window['safari'] && safari.pushNotification &&
    safari.pushNotification.toString() === '[object SafariRemoteNotification]';

Tabii ki, tarayıcıya özgü sorunlarla baş etmenin en iyi yolu, mümkünse her zaman özellik algılama yapmaktır. Bununla birlikte, yukarıdaki gibi bir kod parçası kullanmak, ajan dizesi algılamasından daha iyidir.

— Marcos Sandrini
kaynak
1
Bu, iPhone OS 13_4_1'de safari Sürümü / 13.1 Mobil / 15E148 Safari / 604.1 ile çalışmaz.
— mindo
2

Bu sorunun eski olduğunu biliyorum, ama yine de birisine yardımcı olabileceği için cevabı göndermeyi düşündüm. Yukarıdaki çözümler bazı durumlarda başarısız oldu, bu yüzden iOS, Masaüstü ve diğer platformları ayrı ayrı ele alacak şekilde uygulamak zorunda kaldık.

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;
}
— HH
kaynak
1

Yukarıdaki yanıt için değiştirilmiş normal ifade

var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
  • crios - Krom
  • fxios - Firefox
— Yurii Sherbak
kaynak
1

Bu benzersiz "sorun" tarayıcının Safari olduğuna dair% 100'dür (ister inanın ister inanmayın).

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

Bu, çerez nesnesi tanımlayıcısının Safari'de false değerine ayarlanmış olduğu anlamına gelir, diğer her şey doğruysa, bu aslında bana diğer projede baş ağrısı veriyor. Mutlu kodlama!

— zoxxx
kaynak
Artık doğru değil. Ayrıca Firefox'ta çöküyor "Object.getOwnPropertyDescriptor (...) undefined"
— Offirmo
0

Belki bu işe yarar:

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

DÜZENLEME: DAHA UZUN ÇALIŞMA YOK

— Harshal Marangoz
kaynak
Tam olarak ne yapıyor, çünkü tüm tarayıcılarda -1 döndürür?
— Petroff
@Petroff artık yeni safaride çalışmıyor. Gösterdiğiniz için teşekkürler.
— Harshal Carpenter
2
Cevabı silmek için çekinmeyin.
— Flimm
0

Boole türü döndüren bir işlev oluşturun:

export const isSafari = () => navigator.userAgent.toLowerCase().indexOf('safari') !== -1
— Idan
kaynak
-2

Kullanıcı aracı koklama gerçekten zor ve güvenilmez. İOS'ta Safari'yi @ qingu'nun yukarıdaki cevabı gibi bir şeyle tespit etmeye çalışıyorduk, Safari, Chrome ve Firefox için oldukça iyi çalıştı. Ancak Opera ve Edge'i Safari olarak yanlış tespit etti.

Bu nedenle, bugünden itibaren göründüğü gibi, özellik algılama ile gittik serviceWorker, iOS'ta başka bir tarayıcıda değil, yalnızca Safari'de destekleniyor. Https://jakearchibald.github.io/isserviceworkerready/ adresinde belirtildiği gibi

Destek, söz konusu platformdaki üçüncü taraf tarayıcıların iOS sürümlerini içermez (bkz. Safari desteği).

Yani böyle bir şey yaptık

if ('serviceWorker' in navigator) {
    return 'Safari';
}
else {
    return 'Other Browser';
}

Not : MacOS'ta Safari'de test edilmemiştir.

— AG
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.