COURS JavaScript


Accueil | Redirection en fonction de la version et du type du navigateur

Redirection en fonction de la version et du type du Navigateur



Principe

Le principe est aussi simple que pour la redirection en fonction du nom ou de la version du Navigateur client. Toutes les explications détaillées se trouvent aux rubriques Redirection du client en fonction du nom de son navigateur ou Redirection du client en fonction de la version de son navigateur. Simplement, nous nous servirons non seulement du type du Navigateur, mais aussi du numéro de version du Navigateur pour tester la redirection au lieu de nous servir du Nom seulement ou du numéro de version seulement. Ce qui nous amènera à faire des tests multiples et à employer l'opérateur logique ET. Toutes les explications sont aux rubriques citées ci-dessus, et j'invite ceux et celles qui ne les ont pas vues, à aller y faire un petit tour. Il faut aussi avoir vu la leçon sur les tests.
Dans les exemples que nous montrons, un message d'avertissement lui indique la marque et la version de son navigateur. Dans la réalité, nous verrons qu'il n'est pas nécessaire de donner cet avertissement, et on pourra rediriger automatiquement le surfer sans qu'il s'en aperçoive.

 
 
 



Comment ça marche

Une fonction JavaScript inspecte d'abord la nature et la version du Navigateur client, puis, selon la version du navigateur, redirige automatiquement vers la bonne page HTML. Vous trouverez toutes les explications détaillées à la page de la boîte à outils Redirection du client en fonction du nom de son navigateur ainsi qu'à la page Redirection du client en fonction de la version de son navigateur.

Simplement, nous allons mixer les deux tests pour pouvoir orienter le surfer vers les principaux cas de figure rencontrés. Il y a deux moyens d'écrire cette fonction. Soit par des tests dits "if imbriqués", soit par des tests dits "if successifs" (comme ici) puisque toutes les solutions sont indépendantes les unes des autres. Vous trouverez la solution du même problème en utilisant la technique des "if imbriqués" à : Redirection avec des "if" imbriqués"

Nous distinguerons les cas suivants :

L'utilisateur de Netscape version 4.0 et supérieure
L'utilisateur de MIE version 4.0 et supérieure
L'utilisateur de Netscape version inférieure à 4.0
L'utilisateur de MIE version inférieure à 4.0
L'utilisateur d'autres Navigateurs, quelque soient les versions.

J'ai choisi délibérément d'utiliser ici la technique des tests successifs, que je préférerai toujours aux tests imbriqués lorsque cela est possible. En effet, les tests imbriqués, nécessitent une écriture difficile à lire, et de faire très attention aux cas non prévus, et à l'ordre dans lequel on les fait. Il faut aussi faire très attention au nombre des accolades ouvrantes et fermantes, ce qui est rapidement une source d'erreurs incontrôlable. J'ai cependant traité ce même exemple en utilisant la technique des "if imbriqués" pour faire comprendre comment ça marche à la page : Redirection avec des "if" imbriqués"

 
 



Explications détaillées et exemple 

Toutes les explications détaillées se trouvent à : Redirection du client en fonction du nom de son navigateur et Redirection du client en fonction de la version de son navigateur.
Pour ceux et celles qui n'auraient pas encore vu ce que sont les tests en JavaScript, il serait bien qu'ils aillent d'abord voir la leçon correspondante : Les tests.

Le script JavaScript se présente comme suit :

L'exemple et les explications concerneront les clients qui doivent être redirigés vers la bonne page suivant qu'ils ont un Navigateur de version 4.0 minimum ou non et selon que ce soit NS (Netscape) ou MIE (Microsoft Internet Explorer) ou bien encore d'autres navigateurs quelque soient leur versions..

function detectversion() { // début de la fonction de détection (1)

var OuAller = ""; // vide la variable OuAller (1.1)
var NomNav = navigator.appName; // place le nom du navigateur dans la variable NomNav (2)
var VersNav = navigator.appVersion; // place la version du navigateur dans la variable VersNav (3)
var NumVers = parseFloat(VersNav); // Transforme la chaîne littérale en valeur numérique (3.1)

if (NumVers >= 4 && NomNav == "Netscape") { // teste si NS et >= à 4 (4)
OuAller = ("Pagens4.htm"); // met la bonne page dans OuAller (5)
} // fin du test (6)

if (NumVers >= 4 && NomNav == "Microsoft Internet Explorer") { // MIE et >= à 4 (7)
OuAller = ("Pagemie4.htm"); // met la bonne page dans OuAller
} // fin du test

if (NumVers < 4 && NomNav == "Netscape") { // teste si NS et < à 4 (7.1)
OuAller = ("Pagens3.htm"); // met la bonne page dans OuAller
} // fin du test

if (NumVers < 4 && NomNav == "Microsoft Internet Explorer") { // si MIE et < à 4 (7.2)
OuAller = ("Pagemie3.htm"); // met la bonne page dans OuAller
} // fin du test

if (OuAller == "") { // si autre, rien de tout ça (8)
OuAller = ("PageAutre.htm"); // met la bonne page dans OuAller
} // fin du test

alert("Le nom de votre Navigateur est : " + NomNav+ "\nSa Version complète est : " + VersNav + "\nSon numéro de version est : " + NumVers + "\n\nQuand vous cliquerez sur Ok, vous serez branché sur la version du site correspondant à la bonne version de votre navigateur.\n\nPour le moment, votre page vient de : " + document.location); // (9)

document.location = OuAller; // Redirige sur la bonne page (10)

} // Fin de la fonction (11)

(1)

Nous avons appelé la fonction detectversion(), ce qui n'est pas très original, mais possède l'avantage de représenter ce qu'elle fait. C'est cette fonction qui sera appelée par l'événement onLoad du tag "<Body>" dans le code HTML. Evénement qui se produit automatiquement au chargement du document (de la page HTML) dans le navigateur. N'oubliez pas l'accolade ouvrante { pour marquer le début de la fonction.

(1.1)

Une bonne précaution, lorsque nous utilisons une variable pouvant prendre plusieurs valeurs successivement, est de vider la variable en début de programme. Cela s'appelle "Initialiser les variables". Comme ça, on sait ce qu'elle contient au cas où aucune des alternatives proposées ne se serait avéré. De plus, comme nous devrons orienter le client vers une version de page HTML particulière dans ce cas, nous saurons sur quel contenu tester si rien n'a satisfait aux conditions des tests successifs. L'instruction :

var OuAller = "";

place une chaîne de caractères vide dans la variable OuAller. Notez bien que dans ce cas, elle contient bien quelquechose, même si c'est du vide. Ce qui est différent de la situation où elle ne contiendrait rien du tout, au quel cas, sa valeur serait "Null" en JavaScript. Car JavaScript fait la différence entre "" qui veut dire vide et vraiment rien du tout qui est le néant absolu.

(2)

L'instruction :

var NomNav

sert à définir une variable qui s'appelle NomNav dans laquelle nous stockerons le nom du navigateur client. Si vous ne vous en souvenez plus, révisez la leçon sur les variables. Ensuite, nous mettons dans cette variable, le nom du Navigateur, qui, je le rappelle, est la valeur de la propriété .appName de l'objet navigator. Il suffit d'écrire :

var NomNav = navigator.appName;

pour que le nom du navigateur se trouve désormais dans la variable NomNav. Le point virgule à la fin de l'instruction n'est pas obligatoire ici, puisque nous avons un retour chariot qui marque lui aussi la fin d'une l'instruction JavaScript. Mais un excès de précaution n'est jamais une mauvaise chose en JavaScript.

(3)

L'instruction :

var VersNav

sert à définir une variable qui s'appelle VersNav dans laquelle nous stockerons la version du navigateur client. Si vous ne vous en souvenez plus, révisez la leçon sur les variables. Ensuite, nous mettons dans cette variable, la version du Navigateur, qui, je le rappelle, est la valeur de la propriété .appVersion de l'objet navigator. Il suffit d'écrire :

var VersNav = navigator.appVersion;

pour que la version du navigateur se trouve désormais dans la variable VersNav. Le point virgule à la fin de l'instruction n'est pas obligatoire ici non plus, puisque nous avons un retour chariot qui marque lui aussi la fin d'une l'instruction JavaScript. Comme plus haut.

(3.1)

L'instruction

var NumVers = parseFloat(VersNav);

Transforme la chaîne de caractères représentant la version complète du Navigateur du client, en un nombre sur lequel nous pourrons faire un test "supérieur ou égal", et le stocke dans une variable que nous appelons NumVers. Puisque nous travaillons sur un numéro de version, autant le transformer en nombre. C'est plus logique, et ça apprend à transformer des caractères en nombres. L'instruction parseFloat() transforme en nombre à virgule flottante (nombre décimal). Si nous avions voulu transformer en nombre entier (sans virgule) nous aurions utilisé l'instruction parseInt() qui transforme en nombre entier (sans virgule)

(4)

Ici, nous avons le premier test. Celui qui va nous dire si c'est une version de Navigateur supérieure ou égale à 4 qui est utilisée par le client, ou non ET si, en plus, c'est un Navigateur de type Netscape ou non. Je rappelle que ceux et celles qui ne sont pas familiers avec les tests, doivent d'abord aller voir la leçon sur les tests.

if (NumVers >= 4 && NomNav == "Netscape") {

Puisque nous voulons tester en même temps sur la version ET sur le type de Navigateur, le test va se faire en deux parties. La première, teste si la version est supérieure ou égale à 4 ou non.

NumVers >= 4

La deuxième, teste si le type de Navigateur est "Netscape" ou non.

NomNav == "Netscape"

Dans notre cas de figure, nous voulons créer une page spéciale pour les clients qui sont non seulement sous Netscape mais aussi que la version de ce Netscape soit supérieure ou égale à 4. Nous devons donc tester les ceux conditions, et pour nous satisfaire, il faut que les deux soient vraies en même temps. Nous testons donc ces deux conditions en les séparant par l'opérateur logique ET (qui s'écrit &&). Je rappelle que dans ce cas, pour que le résultat du test entier soit vrai, il faut absolument que les deux conditions soient vraies. Et ça tombe bien, car c'est exactement ce que l'on cherche.

Si l'une des deux conditions seulement est fausse, tout le test sera faux, et l'instruction qui suit dans le test, ne sera pas exécutée. Le programme passera automatiquement à la fin du test, c'est à dire à la première l'accolade fermante qu'il rencontrera.

Vous remarquerez que nous utilisons des variables intermédiaires pour ce test. Nous aurions aussi pu écrire :

if (parseFloat(navigator.appVersion) >= 4 && navigator.appName == "Netscape") {

ce qui serait revenu exactement au même. Mais comme je ne cesse de le répéter, cette forme d'écriture a l'inconvénient d'être longue à écrire, et de plus, il faut faire très attention à ce que le nombre de parenthèses ouvrantes soit égal au nombre de parenthèses fermantes. Ce qui est toujours un casse-tête lorsqu'il y a beaucoup d'instructions imbriquées les unes dans les autres. En plus, c'est moins clair à lire pour quelqu'un qui n'en a pas l'habitude.

(5)

Là, nous utilisons encore une variable intermédiaire : OuAller. Elle parle d'elle même. C'est dans cette variable que nous mettons l'adresse de la page sur laquelle on va brancher automatiquement le client dans le cas où le test est vrai, c'est-à-dire dans le cas où il utilise bien une version de Navigateur supérieure ou égale à 4 ET qu'en plus, son Navigateur est du type Netscape. Dans tous les autres cas de figure, le résultat du test sera faux, et cette instruction ne sera pas exécutée. Ce qui fait que la variable OuAller restera vide.

OuAller = "Pagens4.htm";

Il ne nous restera plus qu'à réutiliser cette variable le moment venu.

(6)

N'oubliez pas l'accolade fermante } qui indique la fin du test.

(7)

Ici, même chose qu'en (4), mais pour les Navigateurs de type MIE.

if (NumVers >= 4 && NomNav == "Microsoft Internet Explorer") {

Le résultat du test sera vrai si et seulement si la version est supérieure à 4.0, et si en plus, c'est un Navigateur de type MIE. Dans tous les autres cas, le résultat du test sera faux, et l'instruction qui suit ne sera pas exécutée. La variable OuAller restera dans l'état où elle était au moment de ce test. Par contre, si le résultat du test est vrai, alors la bonne page sera mise dans OuAller. Quoi qu'elle ait contenu auparavant. Comme en (5).

(7.1), (7.2)

Ces deux tests parlent d'eux même.

if (NumVers < 4 && NomNav == "Netscape") {

teste si la version est inférieure à 4, c'est à dire tout sauf les versions supérieures ou égales à 4, et si en plus, le type du navigateur est Netscape. Le résultat du test sera vrai si et seulement si les deux conditions sont vraies.

if (NumVers < 4 && NomNav == "Microsoft Internet Explorer") {

teste pareil, mais pour les types de Navigateurs MIE. Et dans tous les cas, la variable OuAller sera mise à la bonne valeur avec l'adresse de la bonne page suivant le cas.

(8)

Si tous les tests précédents ont échoués, la variable OuAller n'aura pas changé de valeur et sera vide, puisque aucune instruction de tests n'aura été exécutée. Nous serons donc dans le cas de figure où l'utilisateur n'a aucun des navigateurs pour lesquels nous avons écrit des pages spéciales. Ce ne sera ni :

Netscape version 4.0 et supérieure
ni MIE version 4.0 et supérieure
ni Netscape version inférieure à 4.0
ni MIE version inférieure à 4.0. Ce sera encore autre chose. On ne sait pas quoi, mais ça nous est égal. Seuls ces quatre cas nous intéressaient. Dans tous les autres cas, on envoie vers une page ordinaire.

If (OuAller == "") {

teste si OuAller est vide, c'est à dire est encore dans l'état où on l'a mise en début de programme en (1.1)

Si c'est le cas, alors le résultat de ce test sera vrai, et l'instruction qui suit sera exécutée, et la variable OuAller aura la bonne valeur pour ce cas de figure.

Nous aurons ainsi couvert tous les cas qui nous intéressaient, et nous n'avons plus qu'à envoyer l'utilisateur vers la page qui est dans la variable OuAller.

(9)

Ce que vous voyez ici, est complètement facultatif. J'ai mis ce message d'alert, uniquement pour que vous voyez bien comment se présentent les valeurs des propriétés de l'objet navigator que nous utilisons. L'utilisation de l'instruction "alert()" dans un programme JavaScript, vous permet de voir, au moment où elle s'affiche à l'écran, le contenu de différente chose dans votre programme. C'est parfois bien utile lorsque le programme se plante. Mais nous en reparlerons à d'autres occasions. Si vous ne voulez pas que cette "alert" s'affiche, vous n'avez qu'à la mettre en commentaire en ajoutant // devant "alert", et on n'en parle plus. Lorsque vous en aurez de nouveau besoin, vous enlèverez les deux barres obliques // devant alert, et ça s'affichera de nouveau. Nous étudierons ailleurs la syntaxe un peu particulière du contenu de ce message "alert". Ce serait trop long ici, et ça n'est pas le sujet.

(10)

Ce qui se passe maintenant, est en dehors du test. Nous l'avons vu. Tout ce qui se trouve ici et après, jusqu'à la fin de la fonction, sera exécuté quelque soit le résultat du test. Maintenant que nous savons où rediriger l'utilisateur grâce à la variable OuAller, nous n'avons plus qu'à l'utiliser à bon escient. C'est ce que fait l'instruction :

document.location = OuAller;

Comme nous l'avons vu plus haut, la propriété .location de l'objet document (la page HTML en train d'être lue par le Navigateur), représente l'adresse Internet où se trouve physiquement cette page. Il suffit de changer la valeur de cette propriété en y mettant l'adresse de la page que nous voulons ouvrir dans le Navigateur, pour qu'il le fasse sans plus se poser de question. Et le tour est joué. Pas plus compliqué que ça... :-) Le résultat de l'exécution de cette instruction, sera d'ouvrir la bonne page pour le bon Navigateur. Grâce aux tests faits en amont. Pas mal non ? :-))

(11)

N'oubliez surtout pas cette accolade fermante } qui indique à JavaScript la fin de la fonction . Sans quoi, il serait incapable de savoir où il en est, et nul ne sait ce qui pourrait se produire. En réalité, vous aurez un plantage qui dans le meilleur des cas vous indiquera qu'il y a une erreur JavaScript dans la barre d'état (en bas) de votre navigateur. Il suffit de taper JavaScript: dans la barre d'adresse du navigateur (sous Netscape) pour voir d'où vient l'erreur. Nous ferons une leçon sur le "débugage" (il faut que je l'écrive...) :-)

Cliquez ici pour voir un exemple
   


 


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.