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?


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

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

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


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.


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;

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
}

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 .


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


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!


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

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

0

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

 navigator.vendor.startsWith('Apple')

0

FONCTION générique

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.