web-dev-qa-db-fra.com

Détecter Safari à l'aide de jQuery

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

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

Documents de détection du navigateur de jQuery marque "safari" comme obsolète.

Existe-t-il une meilleure méthode ou dois-je m'en tenir à la valeur obsolète pour l'instant?

javascriptjquerybrowser-detection
104
AndreKR

Utilisation d’un mélange de feature detection et de Useragent chaî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');}
327
Panos Kal.

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

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
73
brissmyr

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

10
user3107045

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.

7
FlamyTwista

Apparemment, la seule solution fiable et acceptée serait de faire la détection de fonctionnalités comme ceci:

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;
3
AndreKR

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
}
2
ohrlando

Si vous vérifiez le navigateur, utilisez $.browser. Mais si vous vérifiez le support technique (recommandé), utilisez $.support.

Vous ne devez PAS utiliser $ .browser pour activer/désactiver les fonctionnalités de la page. La raison en est sa non fiable et généralement tout simplement pas recommandé.

Si vous avez besoin de fonctionnalités, je vous recommande modernizr .

1
John Strickler

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');
}
0
Dushyant Dagar
//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/

0
Code Spy

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

 navigator.vendor.startsWith('Apple')
0
Daniel De León
    // 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
Vitaly

Fonction générique

 getBrowseActive = function (browserName) {
   if (navigator.userAgent.indexOf(browserName) > -1)
     return true;

   return false;
 };
0
user1330204

Un moyen très utile de remédier à ce problème consiste à détecter la version du webkit des navigateurs et à vérifier si elle correspond au moins à celle dont nous avons besoin, sinon faites autre chose.

En utilisant jQuery cela va comme 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.");
    };
});

Ceci fournit une solution sûre et permanente pour résoudre les problèmes liés aux différentes implémentations de webkit du navigateur.

Bonne codage!

0
reicek