Detecta Safari usando jQuery

111

Aunque ambos son navegadores basados ​​en Webkit, Safari urlencodes comillas en la URL, mientras que Chrome no.

Por lo tanto, necesito distinguir entre estos dos en JS.

Los documentos de detección del navegador de jQuery marcan "safari" como obsoleto.

¿Existe un método mejor o simplemente me quedo con el valor obsoleto por ahora?

AndreKR
fuente
No sé si seguir con él es una buena idea, no lo he revisado en profundidad, aunque solo busqué los documentos $ .browser en Chrome y se marca $.browser.safari === true. eeek.
davin
1
posible duplicado de ¿Cómo detectar los navegadores Safari, Chrome, IE, Firefox y Opera sin que el agente de usuario detecte ?
Rob W

Respuestas:

340

El uso de una mezcla de feature detectiony Useragentcadena:

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

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

O solo para Safari, use esto:

if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}
Panos Kal.
fuente
3
Con una proporción de 48 votos frente a 5 votos para una función de detección con efectos secundarios, aparentemente esta es la solución recomendada. :) Haciendo que sea una respuesta aceptada.
AndreKR
1
Como ejemplo de lo frágil que es este tipo de cosas, este código no detecta Internet Explorer 11 porque la cadena UA ha cambiado. Ver msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson
1
La vista web de Android también dirá Safari y eso no es correcto
Curtis
15
Chrome / Windows informará como 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) para admitir también IE11 >>> stackoverflow.com/a/22242528/2049986
Jacob van Lingen
74

Lo siguiente identifica Safari 3.0+ y lo distingue de Chrome:

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
brissmyr
fuente
1
Esta es la cosa. TNX!
Eugen Sunic
10

desafortunadamente, los ejemplos anteriores también detectarán el navegador predeterminado de Android como Safari, que no es así. solía navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1

user3107045
fuente
7

Para comprobar Safari utilicé esto:

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

Funciona correctamente.

FlamyTwista
fuente
3

Aparentemente, la única solución confiable y aceptada sería realizar una detección de características como esta:

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
fuente
2
Buen truco, pero desafortunadamente no funciona. La igualdad (location.hash == '#% 22blah% 22') no funcionará debido a la forma en que location.hash trata la cadena. : /
Panos Kal.
1
La detección de características es el camino a seguir, pero hay un método mejor que no tiene efectos secundarios. Su fragmento puede interferir con otros scripts que dependen de eventos de cambio de hash. He marcado la pregunta como un duplicado de esta . He creado y probado el método en Safari 3.0 - 5.1.3 (Mac y Windows). Es una sola línea :)
Rob W
2

La única forma que encontré es verificar si navigator.userAgent contiene la palabra iPhone o iPad

if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
    //is safari
}
Ohrlando
fuente
1

Si está comprobando el uso del navegador $.browser. Pero si está comprobando el soporte de funciones (recomendado), utilice $.support.

NO debe usar $ .browser para habilitar / deshabilitar funciones en la página. La razón es que no es confiable y generalmente no se recomienda.

Si necesita compatibilidad con funciones, le recomiendo modernizr .

John Strickler
fuente
Enseñe a un hombre a pescar ... "¿Existe un método mejor?" - Sí, detección de características.
John Strickler
¿Te refieres a algo como location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR
@AndreKR Exactamente, haría una función para probar específicamente la función que está buscando.
John Strickler
2
@Greg No está preguntando al navegador ... está probando el navegador.
John Strickler
12
La detección de características es excelente, pero ¿qué sucede cuando desea evitar que un navegador en particular use animaciones CSS (por ejemplo), porque tiene una implementación defectuosa? Técnicamente, es compatible con la función, pero queremos tomar la decisión de deshabilitarla para ese navegador, porque la experiencia es mejor sin esa función.
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/

Código espía
fuente
0

Una forma muy útil de solucionar esto es detectar la versión del webkit del navegador y comprobar si es al menos la que necesitamos, de lo contrario, hacer otra cosa.

Usando jQuery es así:

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

Esto proporciona una solución segura y permanente para solucionar problemas con las diferentes implementaciones de webkit del navegador.

¡Feliz codificación!

reicek
fuente
0

Esto determinará si el navegador es Safari o no.

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert(its safari);
}else {
    alert('its not safari');
}
Dushyant Dagar
fuente
Desafortunadamente, no funciona. Probado en Chrome v66 y 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
fuente
0

Utilizo para detectar el motor del navegador de Apple, esta simple condición de JavaScript:

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

FUNCION Genérica

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
usuario1330204
fuente