Détecter
le navigateur en Javascript ? La bonne méthode
Derrière ce titre un peu présompteux se cache une astuce très simple, mais étonnamment peu utilisée, pour exécuter le bon code quel que soit le navigateur.
Tout développeur Javascript s'est trouvé confronté
aux problèmes de compatibilité de son code avec les
implémentations du langage dans les différents navigateurs.
Le problème se posait plus particulièrement quand
on considérait les importantes divergences entre Netscape
et Internet Explorer.
Aujourd'hui, un grand nombre de ces divergences persistent malheureusement,
et le marché des navigateurs s'est de plus considérablement
enrichi de produits performants, comme Konqueror (sous Linux), Opéra,
Mozilla ou encore Amaya, Galeon (sous Linux), etc.
Produire du code compatible impose donc, de plus en plus, d'adapter
le script concerné en fonction du navigateur, quand la fonction
que l'on désire mettre en place se programme différemment
de l'un à l'autre.
Mais la méthode communément utilisée, qui repose
sur la détection du navigateur à l'aide des variables
navigator.appName & navigator.appVersion, pose
plusieurs problèmes:
- d'abord, la méthode est lourde si l'on décide de
prendre en compte un grand nombre de navigateurs (ce qui est pourtant
nécessaire si l'on désire couvrir l'ensemble de ses
visiteurs); de plus, certains navigateurs "cachent" leur
identité, rendant leur détection par ce biais plus
que problématique;
- ensuite, des navigateurs inconnus du programmeur, ou des navigateurs
apparus après la production du code, ne seront pas couverts
(le programmeur a certainement prévu un code "de rechange"
pour tous les navigateurs non supportés, mais alors certains
de ces derniers, qui implémentent pourtant la fonction Javascript
pour laquelle une détection de navigateur est mise en place,
ne tireront pas profit de cette fameuse fonction, et n'auront que
le code de rechange à se mettre sous la dent);
- enfin, la méthode est source d'erreur en cas de mauvaise
connaissance de la part du programmeur des implémentations
exactes du langage.
Une méthode beaucoup plus rigoureuse, et qui constitue une
solution aux trois problèmes précités, consiste
à baser la détection non plus sur le nom et la
version du navigateur, mais sur la méthode ou l'objet
dont la compatibilité avec certains navigateurs n'est pas
assurée, ou douteuse.
En clair, il s'agit de remplacer, par exemple, la portion de code
suivante, hasardeuse dans ces effets:
if (navigator.appName=="Netscape")
sel = document.getSelection();
else if (navigator.appName=="Microsoft Internet Explorer")
sel = document.selection.createRange().text;
else return;
alert("Votre sélection: "+sel);
(Démonstration: Sélectionner
du texte et cliquer ici)
Par (code "propre" et fonctionnel):
if (document.getSelection) sel = document.getSelection();
else if (document.selection) sel = document.selection.createRange().text;
else return;
alert("Votre sélection: "+sel);
(Démonstration: Sélectionner
du texte et cliquer ici)
Ici, nous contrôlons le support de la méthode getSelection()
ou de l'objet selection, qui, selon les cas, sont exploités
dans le code (ils permettent de récupérer du texte
sélectionné par l'utilisateur sur la page).
Ce contrôle par objet, fort heureusement permis par Javascript,
peut avoir bien d'autres utilités, notamment la détection
du support du DHTML. Il suffit pour cela de contrôler une
propriété typique du DHTML, et notamment de la manière
suivante:
if (document.getElementById || document.all || document.layers)
{ ... }
Si l'un de ces trois objets ou méthodes est supportés
par le navigateur, le code DHTML fonctionnera.
[Jérôme
Morlon, 15 mai 2002
, JDNet]
|
