COURS JavaScript


Accueil | Redirection en fonction de la version du navigateur

Redirection en fonction de la version du Navigateur



Principe

Le principe est aussi simple que pour la redirection en fonction du nom du Navigateur client. Toutes les explications détaillées se trouvent à la rubrique Redirection du client en fonction du nom de son navigateur. Simplement, nous nous servirons du numéro de version du Navigateur pour tester la redirection au lieu de nous servir du Nom du Navigateur.
En fait, l'utilisation de la redirection en fonction de la version du Navigateur client est très souvent utilsée, et de plus en plus, du fait de l'apparition de nouvelles techniques telles que les CSS (Cascade Style Sheet, les Feuilles de Style en Cascade), le DHTML (Dynamic HTML), la gestion des Layers (Calques) etc. qui ne sont interprétables que par les Navigateurs de version 4.0 et au dessus, et d'une manière différente selon la nature du Navigateur du client. Ca ne nous simplifie pas la tâche, mais si nous voulons utiliser des techniques modernes et être vus par la majorité des Internautes, nous sommes quasiment obligés de créer plusieurs versions de nos pages HTML. En ce sens, nous devrons même faire des choix non seulement en fonction du nom du Navigateur, mais aussi en fonction de sa version. En prenant les deux paramètres en compte. C'est l'objet de la rubrique "Redirection du client en fonction du nom et de la version de son navigateur"
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 appreç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.

Ceci fait appel aux propriétés l'objet navigator du navigateur qui ouvre le document (la page HTML). Il existe deux propriétés (entre autres) qui permettent de voir le nom du Navigateur, et sa version.

La propriété .appName de l'objet navigator permet de voir le nom du Navigateur
La propriété .appVersion de l'objet navigator permet de voir la version du Navigateur.

Ces deux propriétés de l'objet navigator sont bien entendu en lecture seule. C'est à dire que nous pourons les lire, mais pas les modifier (heureusement du reste, sinon, où irions nous !). Comme toutes propriétés en lecture, nous y aurons accès par l'instruction :

navigator.appName pour ce qui est du nom du Navigateur, et navigator.appVersion pour ce qui est de la version du Navigateur. Comme nous le savons déjà, ces deux instructions peuvent être utilisées en l'état, c'est-à-dire en les écrivant telle que nous venons de le faire, dans n'importe quelle expression JavaScript. Ce qui est un raccourcis. Mais à notre habitude, et en nous souvenant qu'un bon programme est un programme qui "tourne" et pas un programme "sioux", nous transfèrerons d'abord ces données dans des variables avant de nous en servir. Ce qui raccourciera l'écriture si nous avons à nous en servir de nouveau dans la même fonction.

Nous définirons la variable NomNav pour y stocker le nom du Navigateur, et la variable VersNav pour y stocker la version du navigateur. Ce qui donnera :

NomNav = navigator.appName
et
VersNav = navigator.appVersion

Bien sûr, NomNav et VersNav sont totalement arbitraire, et vous pourriez utiliser n'importe quel nom à la place. Mais ceux-ci ont l'avantage de représenter leur contenu. Ce qui est bien pratique pour se souvenir à quoi elles servent.

Une fois les renseignements stockés, nous n'aurons plus qu'à faire les tests qui nous permettrons de rediriger automatiquement le client vers la bonne page HTML.
Pour faire celà, nous utiliserons la propriété .location de l'objet document, qui représente l'adresse physique du document actuellement affiché dans la fenêtre du Navigateur. Cette propriété est en lecture et en écriture, c'est à dire que nous pouvons la modifier. Et le fait de la modifier, en lui donnant pour valeur l'adresse physique d'un autre document (page HTML), fait que le navigateur, obéissant comme pas deux, ira directement chercher le document (page HTML) que nous lui spécifierons. Ce qui nous arrange bien, vu que c'est exactement ce que nous voulons faire.

Comme à notre habitude, nous nous servirons de variables pour stocker le nom du document (page HTML) à aller chercher. Cette variable, je l'ai appelé OuAller. En mettant dans cette vairable l'adresse physique de la page HTML à appeler, nous n'aurons qu'à écrire :

document.location = OuAller

et le navigateur ouvrira automatiquement la page en question.
Le principe de fonctionnement étant posé, étudions le code JavaScript et HTML correspondant.

 
 



Explications détaillées et exemple 

Toutes les explications détaillées se trouvent à : Redirection du client en fonction du nom 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.

function detectversion() { // début de la fonction de détection (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) { // teste si supérieure ou égal à 4 (4)
OuAller = "PageV4.htm"; // si vrai, met l'adresse de la page pour version 4 dans la variable OuAller (5)

}else{ // si ça n'est pas vrai, c'est pas supérieur ou égal à 4 (6)

OuAller = "PageV3.htm"; // met l'adresse de la page pour versions < à 4 dans la variable OuAller (7)
} // fin du test (8)

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 est à : " + document.location); (9)

document.location = OuAller; // Redirrige 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 répré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.

(2)

L'instruction :

var NomNav

sert à définir une variable qui s'appelle NomNav dans laquelle nous sotckerons 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 sotckerons la versiondu 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 versiondu 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 fameux 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. 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) {

Nous savons déjà que le numéro de version du navigateur utilisé est dans la variable NumVers. Le numéro de version du Navigateur est un nombre décimal puisque nous l'avons transformé ainsi. Si donc, dans cette variable NumVers, se trouve un nombre supérieur ou égal à 4, le résultat du test sera "vrai", et l'instruction qui suit sera exécutée. Si le contenu de la variable NumVers n'est pas un nombre supérieur ou égal à 4, le résultat du test sera faux, et c'est l'instruction qui est dans la partie } else { du test qui sera exécutée. Et c'est bien ce que nous voulons.

Vous remarquerez que nous utilisons une variable intermédiaire pour ce test. Nous aurions aussi pu écrire :

if (parseFloat(navigator.appVersion)) >= 4) {

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.

(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.

OuAller = "PageV4.htm";

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

(6)

Ici, nous nous trouvons dans la partie qui sera mise en oeuvre par le programme dans le cas où le résultat du test n'est pas "vrai". C'est à dire si le client n'utilise pas une version de Navigateur supérieure ou égale à 4. Dans ce cas, la première partie du test n'aura pas été exécutée, et la variable OuAller sera encore vide. Si le résultat du test est "faux", alors le programme se branche directement ici pour exécuter l'instruction qui se trouve en dessous. Dans l'instruction :

}else{

la première accolade fermante } représente la fin de la partie à éxécuter dans le cas où le résultat du test aurait été "vrai". Le else ("sinon" en français), veut dire "nous entrons dans la partie réservée au résultat du test si il est faux", et la deuxième accolade ouvrante { marque le début des instructions à exécuter dans ce cas là. Vous voyez qu'en JavaScript, tout a une signification bien précise.

(7)

Ici, nous utilisons encore la variable intermédiaire : OuAller. Mais là, nous allons y mettre l'adresse de la page sur laquelle on va brancher automatiquement le client dans le cas où le résultat du test est faux, c'est-à-dire dans le cas où il n'utilise pas une version de Navigateur supérieure ou égale à 4.

OuAller = "PageV3.htm";

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

(8)

N'oubliez surtout pas cette accolade fermante } qui indique à JavaScript la fin du test. Sans quoi, il serait incapable de continuer, et vous seriez planté. Tout ce qui suivra dans la fonction, sera en dohors de la zone du test, et se produira quelque soit le résultat du test. Vrai ou Faux. Peu importe. C'est pour cela que nous avons rempi les variable nécessaires dans le test, de manière à en disposer en dehors du test.

(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'uitlisation 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 // davant 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ù redirriger l'utilisateur grâce à la variable OuAller, nous n'avons plus qu'à l'utiiser à 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'éxecution de cette instruction, sera d'ouvrir la bonne page pour le bon Navigateur. Grâce au test fait en amont. Futé 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.