Quelle est la meilleure façon de détecter le navigateur en version Javascript?

La manière standard de détecter le navigateur utilisé est de vérifier l'agent utilisateur fourni.

var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index == -1) return; return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] }; BrowserDetect.init(); 

http://www.quirksmode.org/js/detect.html

Dans l'une de mes classes de Développement Web, nous avons demandé de créer un script qui détecte NE4, NE6 +, IE4, IE6 +

Votre classe de développement Web est désespérément, risiblement dépassée.

Retour dans les jours où Netscape4 et IE4 étaient des navigateurs communs, il était souvent nécessaire de renifler le type de navigateur et de leur servir différentes feuilles de style et scripts, car leur compatibilité avec les styles et les fonctionnalités DHTML était très différente.

Ces jours-ci, le navigateur de base, de qualité la plus basse dont vous vous inquiétez, est fermement IE6. Presque personne n'utilise rien de plus bas, car IE6 est venu avec XP et l'utilisation de boîtes Win2K et Win9X non mises à niveau est de plus en plus petite. Certes, personne dans l'univers n'utilise IE4 ou le terrible Netscape 4; Très peu de sites Web actuels fonctionneront même sur eux.

Grâce aux normes Web, tous les autres navigateurs que vous pourriez vouloir cibler (IE7 +, Firefox2 +, Opera, Safari, Chrome, Konqueror) sont généralement assez proches de l'intercompatibilité que vous aurez rarement besoin de faire beaucoup de détection de navigateur. IE6 exige des soins, mais généralement, si vous utilisez le mode standard, vous pouvez obtenir quelques hacks CSS (spécifiquement "* html") et certains renflements de capacité dans les scripts, plutôt que d'avoir à proposer un contenu complètement différent pour cela.

Maintenant, mes questions sont-elles de quelle manière est la meilleure façon de détecter la détection d'objet du navigateur ou l'utilisation de l'objet Navigator?

Détection d'objet / méthode.

Évitez l'objet navigateur dans la mesure du possible; Il se trouve souvent à des fins de compatibilité, et les chaînes de balayage pour essayer de définir les noms des navigateurs peuvent facilement trier sur des jetons inattendus dans la chaîne utilisateur-agent.

Dans le cas où vous devez détecter IE6 spécifiquement (ce qui est de loin le navigateur le plus courant pour détecter et ajouter des solutions de contournement), et il n'y a pas de possibilité de reniflement de capacité, il est préférable d'utiliser une compilation conditionnelle que le traitement navigator.userAgent.

La meilleure façon est d'éviter d'utiliser le code dépendant du navigateur autant que possible, mais là où cela est absolument nécessaire, utilisez un code qui a été prouvé correctement écrit par des personnes qui connaissent beaucoup plus que vous et moi. Je suggérerais JQuery, car c'est ma bibliothèque de Mais il y a beaucoup d'autres (YUI est populaire, comme Scriptilicious, etc.). Google JQuery pour commencer. Aussi, google 'John Resig à Google' pour voir si vous pouvez trouver une conversation qu'il a faite là où il discute de certaines des techniques qu'il utilise pour détecter les capacités du navigateur. C'est très intelligent, car il s'adapte lorsque les navigateurs corrigent leurs problèmes d'héritage.

Il est obsolète en 1.3.2 jQuery.browser () renverra des informations utiles … voir aussi jQuery.support ()

La meilleure façon est de ne pas le détecter, mais d'utiliser une bibliothèque compatible avec le navigateur comme jQuery. Cela a également beaucoup d'autres avantages en termes d'expressivité.

Honnêtement, si vous essayez de détecter le navigateur, vous attaquez le mauvais problème. Mon conseil serait de détecter les fonctionnalités que vous souhaitez utiliser et de dégrader en fonction de cela. Par exemple, si vous devez créer un XMLHttpRequest, quelque chose de semblable au suivant fonctionnera:

  var xhr = null; if (typeof(XMLHttpRequest) !== 'undefined') xhr = new XMLHttpRequest(...); else if (typeof(ActiveXObject) !== 'undefined') xhr = new ActiveXObject('Microsoft.XMLHTTP'); if (xhr != null) ...do something with it else throw "No XMLHttpRequest"; 

Cette approche permet à vos applications de se développer à mesure que les navigateurs commencent à prendre en charge plus de fonctionnalités. Évidemment, il va sans dire que ces types de contrôles devraient être abstraits dans une fonction quelque part afin de ne pas jeter votre code avec les mêmes chèques à plusieurs reprises.

Cependant, si vous pouvez utiliser une bibliothèque Ajax comme JQuery, Prototype, Dojo, YUI, etc., c'est probablement votre meilleur pari, car ils ont déjà les abstractions intégrées.

J'ai construit un simple détecteur d'utilisateur Mac Firefox Mac qui écrit des CSS spécifiques. http://www.combsconsulting.com/code-firefox-mac-hack.html

Vous allez vouloir utiliser Conditionizr, qui dispose d'add-ons robustes test / détection pour ceci: http://conditionizr.com

Par exemple:

 conditionizr.add('safari', [], function () { return /constructor/i.test(window.HTMLElement); });