Comment détecter le navigateur Chrome et Safari (Webkit)

Question

Je suis en train d'essayer de détecter le navigateur Chrome et Safari en utilisant jQuery ou JavaScript. Je pensais que nous ne sommes pas censés utiliser jQuery.browser. Y a-t-il des suggestions ici? Merci beaucoup!

Answer 1

Si vous ne souhaitez pas utiliser $.browser, regardez cas 1, sinon peut-être que cas 2 et 3 peuvent simplement vous aider à être informé car il n'est pas recommandé d'utiliser $.browser (l'agent utilisateur peut être falsifié en l'utilisant). Une alternative peut être d'utiliser jQuery.support qui détectera la prise en charge des fonctionnalités et non les informations sur l'agent.

Mais...

Si vous insistez pour obtenir le type de navigateur (juste Chrome ou Safari) mais sans utiliser $.browser, cas 1 est ce que vous recherchez...

---

Cela correspond à vos besoins :

Cas 1: (Pas de jQuery et pas de $.browser, juste du javascript)

Démonstration en direct: http://jsfiddle.net/oscarj24/DJ349/

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isChrome) alert("Vous utilisez Chrome !");
if (isSafari) alert("Vous utilisez Safari !");

---

Ces cas que j'ai utilisés auparavant ont bien fonctionné, mais ils ne sont pas recommandés...

Cas 2: (Utilisation de jQuery et de $.browser, celui-ci est délicat)

Démonstration en direct: http://jsfiddle.net/oscarj24/gNENk/

$(document).ready(function(){

    /* Obtenir le navigateur */
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

    /* Détecter Chrome */
    if($.browser.chrome){
        /* Faire quelque chose pour Chrome à ce stade */
        /* Enfin, s'il s'agit de Chrome, alors jQuery pense que c'est Safari donc nous devons lui dire que ce n'est pas le cas */
        $.browser.safari = false;
    }

    /* Détecter Safari */
    if($.browser.safari){
        /* Faire quelque chose pour Safari */
    }

});

Cas 3: (Utilisation de jQuery et de $.browser, solution "élégante")

Démonstration en direct: http://jsfiddle.net/oscarj24/uJuEU/

$.browser.chrome = $.browser.webkit && !!window.chrome;
$.browser.safari = $.browser.webkit && !window.chrome;

if ($.browser.chrome) alert("Vous utilisez Chrome !");
if ($.browser.safari) alert("Vous utilisez Safari !");

Answer 2

La plupart des réponses ici sont obsolètes, il n'y a plus de jQuery.browser, et pourquoi quelqu'un utiliserait même jQuery ou reniflerait l'Agent Utilisateur est au-delà de ma compréhension.

Au lieu de détecter un navigateur, vous devriez plutôt détecter une fonctionnalité
(si elle est prise en charge ou non).

La chose suivante est false dans Mozilla Firefox, Microsoft Edge; c'est true dans Google Chrome.

"webkitLineBreak" in document.documentElement.style

Notez que cela n'est pas durable dans le temps. Un navigateur pourrait mettre en œuvre la propriété -webkit-line-break à n'importe quel moment à l'avenir, entraînant ainsi une détection erronée. Ensuite, vous pouvez simplement regarder l'objet document dans Chrome et choisir n'importe quoi avec le préfixe webkit et vérifier que cela manque dans les autres navigateurs.

Answer 3

Au lieu de détecter un navigateur, vous devriez plutôt détecter une fonctionnalité (si elle est prise en charge ou non). C'est ce que Modernizr fait.

Il y a bien sûr des cas où vous devez encore vérifier le navigateur car vous devez contourner un problème et non détecter une fonctionnalité. Vérification spécifique de WebKit qui n'utilise pas $.browser de jQuery :

var isWebKit = !!window.webkitURL;

Comme certains commentaires l'ont suggéré, l'approche ci-dessus ne fonctionne pas pour les anciennes versions de Safari. Mise à jour avec une autre approche suggérée dans les commentaires et par une autre réponse :

var isWebKit = 'WebkitAppearance' in document.documentElement.style;

Answer 4

/WebKit/.test(navigator.userAgent) - c'est tout.

Answer 5

JQuery fournit cela :

if ($.browser.webkit){
    ...
}

Plus d'informations sur http://api.jquery.com/jQuery.browser/

Mise à jour

Comme mentionné dans d'autres réponses/commentaires, il est toujours préférable de vérifier la prise en charge des fonctionnalités plutôt que les informations sur l'agent. jQuery fournit également un objet pour cela : jQuery.support. Consultez la documentation pour voir la liste détaillée des fonctionnalités à vérifier.