COURS JavaScript


Accueil | Redirection en fonction du nom du navigateur

Redirection en fonction du nom du Navigateur



Principe

Le principe est simple. Si le client utilise Netscape, il est redirigé vers le site développé pour être mieux vu sous Netscape. Si le client utilise Microsoft Internet Explorer, il est automatiquement redirigé vers le site spécifiquement développé pour les utilisateurs de Microsoft Internet Explorer. On pourrait,ainsi programmer des redirections vers les Navigateurs les plus fréquemment utilisés. Il se trouve que ce sont ces deux là que nous rencontrons en grande majorité. Les statistiques le prouvent.
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 le nom du navigateur, redirige automatiquement vers la bonne page HTML.

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 

Dans cette partie, nous avons vu que nous allons devoir faire un choix en fonction de la nature du Navigateur. Pompeusement parlant, ceci s'appelle un "test" en langage informatique. Le fameux "If ... Then ... Else" dont certains informaticiens ont l'habitude. En Français, ça veut tout simplement dire : "Si quelquechose, Alors je fais ceci, Sinon, je fais celà". En clair, si j'ai de l'argent, j'achète une baguette, si je n'en ai pas, je ne l'achète pas. Sachant que le boulanger ne fait pas crédit.
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 :

On suppose que si ça n'est pas MIE, c'est forcément Netscape.

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)

if (NomNav == "Microsoft Internet Explorer") { // teste si c'est MIE (4)
OuAller = "PageMIE.htm"; // si vrai, met l'adresse de la page pour MIE dans la variable OuAller (5)

}else{ // si ça n'est pas vrai, c'est pas MIE (6)

OuAller = "PageNetscp.htm"; // met l'adresse de la page pour NETSC dans la variable OuAller (7)
} // fin du test (8)

alert("Le nom de votre Navigateur est : " + NomNav+ "\nSa Version est : " + VersNav + "\n\nQuand vous cliquerez sur Ok, vous serez branché sur la version du site correspondant à votre navigateur.\n\nPour le moment, votre page vient de : " + 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..

(4)

Ici, nous avons le fameux test. Celui qui va nous dire si c'est MIE qui est utilisé 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 (NomNav == "Microsoft Internet Explorer") {

Nous savons déjà que le nom du navigateur est dans la variable NomNav. Le nom du Navigateur de Microsoft est une chaîne de caractères qui est exactement "Microsoft Internet Explorer", en respectant les majuscules et les minuscules. C'est très important. Si donc, dans cette variable NomNav, se trouve la chaîne de caractères "Microsoft Internet Explorer", le résultat du test sera "vrai", et l'instruction qui suit sera exécutée. Si le contenu de la variable NomNav n'est pas exactement "Microsoft Internet Explorer", 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. Notez bien ici, que nous supposons que si le client ne navigue pas sous MIE, il navigue forcément sous Netscape. Ce qui est peut-être faux, mais il faut bien faire un choix. Nous ne pouvons pas non plus tester tous les navigateurs. Mais il y a fort à parier que si ça n'est pas Netscape, ça en sera un compatible Netscape. Si bien que nous avons peu de risque de nous tromper.

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

if (navigator.appName == "Microsoft Internet Explorer") {

ce qui serait revenu exactement au même. Vous rencontrerez d'ailleurs souvent ce genre d'écriture. Je trouve qu'il a l'inconvénient d'obliger à écrire beaucoup plus de choses dans le cas où quelquepart, ailleurs dans le programme, nous aurions encore besoin d'utiliser le nom du Navigateur. Avec cette variable nous n'aurions qu'à écrire NomNav, ce qui est plus court que navigator.appName. Ceci sera encore plus vrai lorsque nous utiliserons les valeurs de propriétés de champs d'un formulaire, car alors, il y aura presque une demi ligne de texte à écrire pour y arriver. Alors autant le faire une bonne fois pour toutes et utilser ensuite des variables aux noms courts et représentatifs de leur contenu. De plus, comme ça, on évite les erreurs entre majuscules et minuscules, fréquentes en JavaScript.

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

OuAller = "PageMIE.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 MIE. 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 MIE.

OuAller = "PageNetscp.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és. 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.