5

Il existe de nombreuses méthodes de détection de navigateur en JavaScript. Autant que je sache, en utilisant navigator.userAgent ou en détectant des caractéristiques (comme XMLHttpRequest) et ainsi de suite.la meilleure façon de détecter le navigateur dans js

Quelqu'un peut-il me dire quelle est la meilleure et la plus efficace?

+3

Pour la détection de fonctionnalités, utilisez http://www.modernizr.com/ – Idered

Répondre

16

Si vous avez vraiment besoin de savoir ce que navigateur qu'ils utilisent, vous avez la plupart du temps à regarder la chaîne userAgent (bien que vous pouvez parfois déduire le navigateur en recherchant quelques traits obscurs). Sachez simplement que certains navigateurs permettent à l'utilisateur de changer cela et de vous mentir. :-)

Mais la détection du navigateur n'est plus à la mode, pour de bonnes raisons. Au lieu de cela, comme vous le dites, vous voulez détecter les fonctionnalités que vous recherchez. C'est plus fiable, et moins de travail. Juste parce que IE n'a pas supporté addEventListener, par exemple, ne veut pas dire qu'il ne le fera jamais (et en fait IE9 fait). Donc, vous fonction-detect à la place, qui à l'épreuve du futur le code.

Voici un exemple concret: Supposons que vous voulez savoir (comme je l'ai fait pour mon place5 jQuery plug-in) si un navigateur prend en charge le placeholder attribute. Vous pouvez utiliser la détection de navigateur et maintenir une liste des navigateurs dans quelles versions ont ou n'ont pas de support, ce qui est désordonné et quelque chose que vous devez continuer à revenir, etc., etc., ou vous pourriez le faire:

if ("placeholder" in document.createElement("input")) { 
    // The browser supports the attribute 
} 
else { 
    // It doesn't 
} 

... et vous avez terminé.

Il existe un grand ensemble de tests de fonctionnalités dans this page maintenu par kangax. Il y a aussi une bibliothèque appelée Modernizr qui fait la détection de fonctionnalités, les requêtes média, et plus encore pour vous. Si vous utilisez jQuery, une fonction de détection de caractéristiques est intégrée via jQuery.support. Il y a une discussion intéressante sur divers aspects de la détection de caractéristiques, des requêtes média, de la détection de facteur de forme (tablette, téléphone ou PC?) Dans this article.

+0

JUSTE ce dont j'avais besoin! détecter IE9 et ci-dessous. – vsync

+0

@ T.J. Crowder - Convenu d'opter pour la détection de fonctionnalités à la place, mais que faire si vous essayez de détecter le navigateur pour contourner un bug? Un bug que vous ne pouvez pas tester ou qui serait suspendu au navigateur? – johntrepreneur

+0

@ T.J. Crowder - mis à part ma question précédente, j'ai besoin de trouver les navigateurs IE9 à IE7 et un bon moyen légitime (basé sur vos commentaires sur la détection des fonctionnalités) serait d'utiliser des commentaires conditionnels (supportés jusqu'à IE9) qui définissent une variable. Droite? – johntrepreneur

6

Vous ne détectez pas les navigateurs. Au lieu de cela, vous vérifiez les fonctionnalités disponibles.

La détection des navigateurs peut être travaillée (bon sang ... Je devais le faire moi-même en utilisant l'opéra sur gmail il y a quelques années), mais si le navigateur a une fonctionnalité, alors vous savez que vous pouvez l'utiliser.

+0

Il existe des cas où vous devez connaître le navigateur spécifique pour pouvoir, par exemple, fournir un message spécifique au navigateur. –

+0

Et que dirait-on du message magique? –

+0

Eh bien, dans mon cas, des instructions pour activer webGL dans Safari. –

0

Vous pouvez essayer http://www.quirksmode.org/js/detect.html

Mais comme d'autres l'ont noté, vous devriez essayer d'utiliser la détection de fonction, mais il est parfois tout simplement pas assez. Par exemple, quand une caractéristique fonctionne trop mal/lentement, etc.

Un autre outil pour la détection de fonction est Modernizr

0

La détection d'objets est un raccourci pour la détection du navigateur. Comme déjà mentionné, il est plus important de connaître la météo qu'une fonctionnalité est prise en charge par votre navigateur ou non, plutôt que de détecter le navigateur. Le lien suivant vous aidera à différencier les navigateurs en fonction des objets pris en charge par les: http://www.javascriptkit.com/javatutors/objdetect3.shtml

Toutefois, si vous ne souhaitez que pour détecter le navigateur seulement pour le savoir, il est préférable d'utiliser Navigator plutôt que de vérifier divers caractéristiques en vérifiant les conditions.

Questions connexes