Обнаружение браузера Safari


Как определить браузер Safari с помощью JavaScript? Я пробовал код ниже, и он обнаруживает не только Safari, но и браузер Chrome.

function IsSafari() {

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

}
14 88

14 ответов:

вы можете легко использовать индекс Chrome для фильтрации Chrome:

var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari') != -1) { 
  if (ua.indexOf('chrome') > -1) {
    alert("1") // Chrome
  } else {
    alert("2") // Safari
  }
}

Примечание: всегда старайтесь обнаружить конкретное поведение, которое вы пытаетесь исправить, вместо того, чтобы нацеливать его на isSafari?

в крайнем случае, обнаружение Safari с помощью этого регулярного выражения:

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

Он использует отрицательный взгляд-вокруг и он исключает Chrome, Edge и все браузеры Android, которые включают Safari имя в своем агенте пользователя.

Как уже отмечали другие люди, обнаружение функций предпочтительнее, чем проверка для конкретного браузера. Одна из причин заключается в том, что строка агента пользователя может быть изменена. Другая причина заключается в том, что строка может изменить и сломать ваш код в новых версиях.

Если вы все еще хотите сделать это и проверить для любой версии Safari, я бы предложил использовать это

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

Это будет работать с любой версией Safari на всех устройствах: Mac, iPhone, iPod, устройство iPad.

Edit

для тестирования в текущем браузере:https://jsfiddle.net/j5hgcbm2/

Edit 2

Обновлено в соответствии с Chrome docs для правильного обнаружения Chrome на iOS

стоит отметить, что все браузеры на iOS-это просто обертки для Safari и используют один и тот же движок. См. bfred.it прокомментируйте его собственный ответ в этой теме.

редактировать 3

Обновление ПО Firefox docs для правильного обнаружения Firefox на iOS

просто использовать:

var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");

этот код используется для обнаружения только браузера safari

if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) 
{
   alert("Browser is Safari");          
}

поскольку userAgent для chrome и safari почти одинаковы, может быть проще посмотреть на поставщика браузера

сафари

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

Chrome

navigator.vendor ==  "Google Inc."

FireFox (почему он пустой?)

navigator.vendor ==  ""

IE (почему он не определен?)

navigator.vendor ==  undefined

только сафари whitout Chrome:

после попытки других кодов я не нашел ни одного, который работает с новыми и старыми версиями Safari.

наконец, я сделал этот код, который работает очень хорошо для меня:

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>

Я использую этот

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

изменено регулярное выражение для ответа выше

var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
  • crios-Chrome
  • fxios-Firefox

Я знаю, этот вопрос старый, но я думал о публикации ответа в любом случае, как он может помочь кому-то. Вышеперечисленные решения были неудачными в некоторых крайних случаях, поэтому нам пришлось реализовать его таким образом, чтобы обрабатывать iOS, Desktop и другие платформы отдельно.

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

эта уникальная "проблема" - это 100% знак того, что браузер Safari (верьте или нет).

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

это означает, что дескриптор объекта cookie имеет значение false в Safari, а на всех остальных-true, что на самом деле дает мне головную боль в другом проекте. Счастливого кодирования!

может быть, это работает :

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

ИЗМЕНИТЬ: БОЛЬШЕ НЕ РАБОТАЕТ

Я заметил, что только одно слово отличает Safari - "версия". Так что это регулярное выражение будет работать идеально:

/.*Version.*Safari.*/.test(navigator.userAgent)

Я не знаю, почему OP хотел обнаружить Safari, но в редких случаях вам нужен браузер, нюхающий в настоящее время, вероятно, более важно обнаружить движок рендеринга, чем имя браузера. Например, на iOS все браузеры используют движок Safari/Webkit, поэтому бессмысленно получать "chrome" или "firefox" в качестве имени браузера, если базовый рендерер на самом деле Safari / Webkit. Я не тестировал этот код со старыми браузерами, но он работает со всем довольно недавним на Android, iOS, OS X, Windows и 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>

уточнения:

  • все браузеры под iOS будут отображаться как "safari / webkit"
  • все браузеры под Android, но Firefox будет сообщаться как "chrome / blink"
  • Хром, Опера, блиск, Вивальди и др. все будет сообщено как "chrome / blink" под Windows, OS X или Linux