Détecter Safari à l'aide de jQuery

111

Bien que les deux soient des navigateurs Webkit, l'URL de Safari code des guillemets dans l'URL, contrairement à Chrome.

Par conséquent, je dois faire la distinction entre ces deux dans JS.

Les documents de détection de navigateur de jQuery marquent "safari" comme obsolète.

Existe-t-il une meilleure méthode ou est-ce que je m'en tiens simplement à la valeur obsolète pour le moment?

AndreKR
la source
Je ne sais pas si s'en tenir à cela est une si bonne idée, je n'ai pas vérifié cela en profondeur, bien que je viens de parcourir la documentation de $ .browser sur chrome et qu'elle indique $.browser.safari === true. eeek.
davin
1
duplication possible de Comment détecter les navigateurs Safari, Chrome, IE, Firefox et Opera sans renifler l'agent utilisateur ?.
Rob W

Réponses:

340

En utilisant un mélange de feature detectionet de Useragentchaîne:

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

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

Ou pour Safari uniquement, utilisez ceci:

if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}
Panos Kal.
la source
3
Avec un ratio de 48 voix contre 5 voix pour une détection de fonctionnalité avec effets secondaires, c'est apparemment la solution recommandée. :) Faire une réponse acceptée.
AndreKR
1
À titre d'exemple de la fragilité de ce genre de chose, ce code ne détecte pas Internet Explorer 11 car la chaîne UA a changé. Voir msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson
1
La vue Web Android indiquera également Safari et ce n'est pas correct
Curtis
15
Chrome / Windows rapportera comme 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) pour également prendre en charge IE11 >>> stackoverflow.com/a/22242528/2049986
Jacob van Lingen
74

Ce qui suit identifie Safari 3.0+ et le distingue de Chrome:

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
Brissmyr
la source
1
Voilà la chose. TNX!
Eugen Sunic
10

Malheureusement, les exemples ci-dessus détecteront également le navigateur par défaut d'Android comme Safari, ce qui n'est pas le cas. j'ai utilisé navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1

user3107045
la source
7

Pour vérifier Safari, j'ai utilisé ceci:

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

Cela fonctionne correctement.

FlamyTwista
la source
3

Apparemment, la seule solution fiable et acceptée serait de faire une détection de fonctionnalités comme celle-ci:

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
la source
2
Belle astuce, mais malheureusement ça ne marche pas. L'égalité (location.hash == '#% 22blah% 22') ne fonctionnera pas à cause de la façon dont location.hash traite la chaîne. : /
Panos Kal.
1
La détection des fonctionnalités est la voie à suivre, mais il existe une meilleure méthode qui n'a aucun effet secondaire. Votre extrait de code peut interférer avec d'autres scripts qui reposent sur des événements de changement de hachage. J'ai marqué la question comme un double de ceci . J'ai créé et testé la méthode dans Safari 3.0 - 5.1.3 (Mac et Windows). C'est un one-liner :)
Rob W
2

Le seul moyen que j'ai trouvé est de vérifier si navigator.userAgent contient un mot iPhone ou iPad

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

Si vous vérifiez l'utilisation du navigateur $.browser. Mais si vous vérifiez la prise en charge des fonctionnalités (recommandé), utilisez $.support.

Vous ne devez PAS utiliser $ .browser pour activer / désactiver les fonctionnalités de la page. La raison étant ce n'est pas fiable et généralement tout simplement déconseillée.

Si vous avez besoin d'une prise en charge des fonctionnalités, je recommande modernizr .

John Strickler
la source
Apprenez à un homme à pêcher ... "Y a-t-il une meilleure méthode" - Oui, détection des caractéristiques.
John Strickler
Tu veux dire quelque chose comme location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR
@AndreKR Exactement, je créerais une fonction pour tester spécifiquement la fonctionnalité que vous recherchez.
John Strickler
2
@Greg Vous ne demandez pas au navigateur .. vous testez le navigateur.
John Strickler le
12
La détection des fonctionnalités est excellente, mais qu'en est-il lorsque vous souhaitez empêcher un navigateur particulier d'utiliser des animations CSS (par exemple), car il a une implémentation boguée? Il prend techniquement en charge la fonctionnalité, mais nous voulons prendre la décision de la désactiver pour ce navigateur, car l'expérience est meilleure sans dans ce cas.
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/

Espion de code
la source
0

Un moyen très utile de résoudre ce problème est de détecter la version du kit Web du navigateur et de vérifier si c'est au moins celle dont nous avons besoin, sinon de faire autre chose.

En utilisant jQuery, cela ressemble à ceci:

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

Cela fournit une solution sûre et permanente pour traiter les problèmes avec les différentes implémentations de Webkit du navigateur.

Bon codage!

Reicek
la source
0

Cela déterminera si le navigateur est Safari ou non.

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert(its safari);
}else {
    alert('its not safari');
}
Dushyant Dagar
la source
Cela ne fonctionne pas, malheureusement. Testé sur Chrome v66 et 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
Vitaly
la source
0

J'utilise pour détecter le moteur de navigateur Apple, cette simple condition JavaScript:

 navigator.vendor.startsWith('Apple')
Daniel De León
la source
0

FONCTION générique

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
user1330204
la source