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