Vous êtes ici : Accueil des cours Misfu > Informatique > Apprendre la programmation > Cours Javascript > La détection de navigateur

Traduction de la page Browser detect rédigée par Peter-Paul Koch et traduite par Christophe Bruggeman

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.

La détection de navigateur

Les navigateurs d'AOL d'AOL ne peuvent pas être détectés par du JavaScript, parce que Explorer 3, 4 ou 5 qu’il cache fait tout le JavaScript et peut s'annoncer comme Explorer 3, 4 ou 5.
Si vous devez avec certitude détecter les navigateurs d'AOL, vous devez employer un script côté serveur.

Pour le moment je détecte tous les dérivés de Mozilla en tant que Netscape 5.

Une fonction JavaScript très pratique mais souvent surévalué est la détection de navigateur. Parfois vous aurez besoin de donner des instructions spécifiques ou chargez une nouvelle page au cas où l’utilisateur utilise, par exemple, Netscape 3.

Si vous débuter en Javascript, n'employez pas ce script. Veuillez d’abord lire la page sur la détection d'objet.

Exemple

Détectons votre navigateur :

Pour démarrer je décrirai les variables dont vous avez besoin, puis je décris longuement le code d'identification du navigateur et son histoire assez compliqué. Vient alors le script lui-même, suivi de son explication. Enfin je donne quelques bonnes raisons de ne pas employer du tout la détection de navigateur. Veuillez lire cette dernière partie soigneusement si vous débuté en JavaScript.

Les variables

En dessous vous voyez les objets contenus par l'objet navigator. Ces variables peuvent être lut et elles peuvent donner des informations sur le navigateur et l'ordinateur de vos utilisateurs. Naturellement les navigateurs emploient différents noms pour ces méthodes et propriétés, excepté quelques anciens navigateurs.


navigator.userAgent = Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
navigator.platform = Win32
navigator.appCodeName = Mozilla
navigator.appName = Netscape
navigator.appVersion = 5.0 (Windows; fr)
navigator.language = fr
navigator.mimeTypes = [object MimeTypeArray]
navigator.oscpu = Windows NT 5.1
navigator.vendor =
navigator.vendorSub =
navigator.product = Gecko
navigator.productSub = 20060111
navigator.plugins = [object PluginArray]
navigator.securityPolicy =
navigator.cookieEnabled = true
navigator.onLine = true
navigator.javaEnabled = function javaEnabled() { [native code] }
navigator.taintEnabled = function taintEnabled() { [native code] }
navigator.preference = function preference() { [native code] }

Le code d’identification du navigateur

De ces variables, navigator.userAgent est la plus importante puisqu'elle est supportée par tous les navigateurs et elle donne l'information la plus complète.

navigator.userAgent = Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

navigator.userAgent est identique à

Ce string peut contenir des informations correctes sur le navigateur, comme la version et le logiciel d'exploitation.

et ses problèmes

Cependant, aucune loi n'exige des navigateurs qu’ils fournissent l'information correcte. De plus en plus de petits navigateurs offrent à leurs utilisateurs la possibilité de commuter les codes d'identification.

La raison c’est que beaucoup de développeur web utilise la détection de navigateur pour s’assurer, par exemple, que leurs pages sont seulement accessibles dans Internet Explorer. Pour venir à bout de ce mauvais codage, les petits navigateurs ont besoins de changer leur code d'identification de sorte qu'ils peuvent eux aussi, accéder à la page.

Dans Opera le code d’identification contient toujours Opera. Cependant, d'autres navigateurs (notamment safari et iCab) cachent complètement leur identité, ils ne donnent aucun indice permettant de dire qu’ils ne sont en fait ni Netscape ni Explorer.

Il n'y a rien que vous puissiez faire pour eux, excepté employer la détection d'objet à la place. Puisque de toute manière la détection d'objet est de loin supérieure à la détection de navigateur, je vous conseille de ne jamais employer un détecteur de navigateur à moins qu’il n’y est aucune autre façon pour vous d’obtenir l’information dont vous avez besoin.

navigator.appName

N’utilisez jamais navigator.appName. Pour cacher leur véritable identité, beaucoup de navigateurs donnent à cette propriété les valeurs de Netscape ou MSIE. Tous les détecteurs de navigateurs basés sur navigator.appName seront faux.

Démêler le code d’identification du navigateur

Lire le code d’identification d’un navigateur n'est pas facile. Vous devez connaître les nombreux pièges que les fournisseurs de navigateurs ont, sciemment ou inconsciemment, préparés.

Le navigateur

D'abord nous avons besoins de savoir comment ce construit ce code d’identification. Le code commence presque toujours par Mozilla. C'est le nom du vieux moteur Netscape, celui qui a formé le noyau de Netscape 1 à 4.

Quand Netscape 1 était le dernier et le plus grand navigateur, il employait Mozilla en tant que nom et identification. A ce moment là, il était le seul navigateur à supporter les cookies et les autres nouveautés tel que <CENTER>, beaucoup de développeur web ont écrit des détecteurs de navigateurs pour rechercher le code d’identification Mozilla dans le navigateur afin d’envoyer les utilisateurs de Netscape 1 sur des pages avancées et laisser les utilisateurs d'autres navigateurs (mosaïque, Lynx) sur de simples pages.

Mozilla afin d’être eux aussi détectable par les détecteurs de navigateurs. Jusqu’à aujourd’hui, c’est resté une habitude, bien que ce ne soit plus nécessaire.

Une fois de plus, nous voyons que l'utilisation d’un détecteur de navigateur force les navigateurs à s'identifier eux-mêmes différemment (incorrectement, si vous préférez).

Les autres fournisseurs de navigateurs mettent généralement le vrai nom de leur navigateur dans le code d’identification, MSIE ou Opera etc... .Ils ont également rajouté compatible après le numéro de version de Mozilla, pour indiquer qu'ils n'étaient pas vraiment Mozilla mais seulement compatible avec celui-ci. Cette façon de faire est également devenue une habitude.

D'autre part, jusqu'à Mozilla Netscape n’a jamais ajouté Netscape à ce code d’identification. Par conséquent il n'y a pas vraiment de façon de détecter Netscape 4 ou les versions inférieur. Si ce n'est aucun autre navigateur et s'il n’y a pas compatible dans le code d’identification, nous pouvons assumer que c'est un Netscape 1 à 4.

Donc pour détecter un navigateur, nous recherchons les bons codes d’identifications (ou leurs absence).

La version

Après Mozilla viens un slash puis le numéro de version. Dans Netscape avant la version 6 le numéro de version est identique à la version du navigateur actuel, mais d'autres fournisseurs (notamment Microsoft) n'ont pas été contraints par ceci. Au lieu de cela, ils ont choisi le numéro de version de Mozilla dont ils se sentaient le plus compatibles.

Tous les fournisseurs de navigateurs excepté Netscape ont pris l’habitude d’inclure le vrai numéro de version derrière le vrai nom de leur navigateur, séparé par un espace ou un slash. Ainsi une fois que nous avons identifié le nom du navigateur, nous recherchons le deuxième caractère qui est la version du navigateur.

Pour Netscape, nous prenons le numéro qui ce trouve derrière Mozilla/ à la place. C'est correct pour tout les Netscapes jusqu'à la version 6. Malheureusement Mozilla ne suit aucune règle. Si le numéro de version de Mozilla est 5 (ce qui est correct, puisque le '6' n’est qu’une astuces commerciale), mais le nom du navigateur est de la forme Netscape6/6.0 , ne suivant pas la règle que j'ai énoncée plus haut. J'ai donc décidé de ne rien faire à ce sujet, Mozilla est détecté en tant que 'Netscape 5 '.

Système d'exploitation

La détection d'OS est assez simple, à partir du moment ou vous savez comment elle fonctionne. Internet Explorateur dit Windows, tandis que Netscape indique Win, par conséquent détectez toujours Windows en recherchant Win. Il n’est donc pas étonnamment, que le code Mac l’emploie de l'OS Macintosh. Si vous trouvez X11 signifie que l'ordinateur utilise X-Windows pour Unix, si en plus le code Linux est trouvé l'OS est Linux.

Le script

Vous détectez quel navigateur est utilisé par le script suivant :

var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

if (checkIt('konqueror'))
{
	browser = "Konqueror";
	OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible'))
{
	browser = "Netscape Navigator"
	version = detect.charAt(8);
}
else browser = "An unknown browser";

if (!version) version = detect.charAt(place + thestring.length);

if (!OS)
{
	if (checkIt('linux')) OS = "Linux";
	else if (checkIt('x11')) OS = "Unix";
	else if (checkIt('mac')) OS = "Mac"
	else if (checkIt('win')) OS = "Windows"
	else OS = "an unknown operating system";
}

function checkIt(string)
{
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}

Explication

Nous commençons par prendre navigator.userAgent et on met toute la chaîne de caractères en minuscule (toLowerCase) (de sorte qu’il fonctionne aussi si les navigateurs buguent avec les majuscules).

var detect = navigator.userAgent.toLowerCase();

J'emploie une fonction d'aide, checkIt(). C'est la fonction qui fait la véritable détection pour la chaîne de caractères. Elle renvoie le numéro d'index du nom de navigateur dans la chaîne. Si le nom n'est pas dans celle-ci, elle renvoie zéro.

Elle se rappelle également de place (la place du nom du navigateur dans la chaîne) et de thestring. La fonction est seulement exécutée à partir du moment ou nous avons trouvé le bon navigateur. Après ça, la fonction n’est plus appelée donc place et thestring gardent la valeur qu'ils ont eue en détectant le navigateur. Voir ci-dessous pour les détails.

function checkIt(string)
{
	place = detect.indexOf(string) + 1;
	thestring = string;
	return place;
}

La détection de navigateur

L’astuce de ce script, c’est qu’il commence par les navigateurs les plus rares pour finir par les plus communs. Comme nous avons pu le voir Opera peut assumer l'identité d’Internet Explorer, mais il laisse toujours Opera quelque part dans le code d’identification. Par conséquent nous devons d'abord contrôler si le navigateur est Opera, et c’est seulement s'il ne l’est pas que nous cherchons à voir si c'est Internet Explorer. Cet ordre de détection est très important.

Ainsi nous commençons par les navigateurs exotiques. Konqueror en premier.

if (checkIt('konqueror'))
{

Ce qui vient après le if est seulement exécuté quand le nom Konqueror apparaît dans le code du navigateur. Si c’est le cas, le navigateur est Konqueror et l'OS est Linux, bien que le code d’identification du navigateur puisse ne pas contenir de référence pour cet OS.

	browser = "Konqueror";
	OS = "Linux";
}

Vient maintenant une longue liste de else if. Nous commençons encore par les navigateurs les plus rares.

else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"

Si le navigateur n'est aucun de ce qui précède, nous pouvons sans risque vérifier si c’est Explorer.

else if (checkIt('msie')) browser = "Internet Explorer"

Maintenant pour Netscape. Nous vérifions si la chaîne 'compatible' n'est PAS presente. Si elle n'est pas présente, le navigateur est probablement Netscape. En outre, le numéro de version est toujours situé à la neuvième place dans le code du navigateur (index 8, derrière Mozilla/), ainsi nous pouvons immédiatement détectez le numéro de version.

else if (!checkIt('compatible'))
{
	browser = "Netscape Navigator"
	version = detect.charAt(8);
}

Si ce n'est toujours pas le navigateur, alors je ne sais pas.

else browser = "An unknown browser";

Naturellement vous pouvez facilement rajouter d'autres navigateurs à la liste else if. Rappelez-vous juste qu’il faut d’abord vérifier les navigateurs les plus rares.

Détecter la version

Maintenant pour la version. S'il n'y a pas encore de version détecté (si le navigateur n'est pas Netscape)

if (!version)

nous prenons le caractère derrière le nom du navigateur, en utilisant place et thestring que la fonction checkIt() nous a préparé.

version = detect.charAt(place + thestring.length);

Détecter l’OS

Si un OS n'est pas encore détecté

if (!OS)
{

nous commençons une nouvelle liste de else if :

	if (checkIt('linux')) OS = "Linux";
	else if (checkIt('x11')) OS = "Unix";
	else if (checkIt('mac')) OS = "Mac"
	else if (checkIt('win')) OS = "Windows"
	else OS = "an unknown operating system";
}

qui nous donne le système d'exploitation.

Utiliser le

Maintenant vous avez assez d'information pour prendre des décisions basées sur le navigateur de l'utilisateur. Par exemple :

if (browser != "Internet Explorer")
{
	code not executed in Explorer
}

ou

if (version < 4 || browser == "iCab")
{
	code executed in browser versions 3 and below and iCab
}

Ne pas utiliser la détection de navigateur

Maintenant que vous savez comment détecter les navigateurs, vous devez apprendre quand utiliser la détection de navigateur et quand il faut utiliser une autre méthode de détection. Beaucoup de novices sous estime l’importance d’un détecteur de navigateur.

La raison la plus commune d’utilisation d’un détecteur de navigateur, c’est d’empêcher certains scripts d’être exécuté dans des navigateurs ou ils ne seront pas pris en charge. Cependant, utiliser un détecteur de navigateur pour la détection d’objet n’est pas sans risques puisque vous ne pourrez jamais être sur que la détection de navigateur couvrira toutes les circonstances.

La méthode la plus sure est d’utiliser la détection d'objet: cette méthode regarde si le navigateur peut supporter la méthode ou l’objet JavaScript que vous souhaitez utiliser. Utilisez le script de cette page seulement quand la détection d’objet est impossible.


Cours JavaScript : Introduction Javascript Ajouter du Javascript Détection d'objet Déclarations Fontions String DOM Booléen DOM intermédiaire Objets This MouseOver Imprimer Détection navigateur