Redirection en Javascript

Lorsqu'on veut programmer l'affichage automatique d'une nouvelle page dans un onglet on parle de redirection.

Redirection automatique simple avec HTML

Exemple : vous voulez qu'au bout de 5 secondes il y ait redirection automatique vers la page menu de ce tuto. Il suffirait d'écrire dans la partie head.

<meta http-equiv="refresh" content="5;debutant_menu.htm">

Remarquez que l'attribut content contient deux paramètres : nombre de secondes avant redirection et la page cible.

Redirection avec JavaScript : première solution

Mais si vous voulez coder l'algorithme du genre : "si condition VRAI afficher "page1.htm" sinon afficher "page2.htm" alors on parle de redirection conditionnelle. HTML ne sait pas faire car les conditions n'existent pas en HTML ; il faut programmer en JavaScript !

Exemple de redirection conditionnelle traitée avec JavaScript

En fonction du choix dans une liste déroulante il y affichage d'une page différente mais toujours avec une jolie photo ...

Préférez vous une belle plagiste en bikini ou en trikini ou en monkini voire en burkini (lol) ?

Le code HTML correspondant

... <select onchange ="faiguillage()" size = "4" > <option value ="bikini">En bikini</option> <option value ="trikini">En trikini</option> <option value ="monokini">En monokini</option> <option value ="burkini">En burkini</option> </select> ...

Une liste déroulante. Emploi du gestionnaire d'événement : attribut onchange.

Le script correspondant

function faiguillage() { var choix = document.querySelector("select"); switch(choix.value) { case "bikini" : location.href ="bikini.htm" ; break ; case "trikini" : location.href ="trikini.htm" ; break ; case "monokini" : location.href ="monokini.htm" ; break ; case "burkini" : location.href ="burkini.htm" ; break ; } //fin switch } // fin fonction

Notez bien la syntaxe : location.href ="url de la page".
On utilise donc la propriété href de l'objet location.

Problème : la nouvelle page ne s'affiche pas dans un nouvel onglet !

Redirection en JS : deuxième solution

Heureusement il y a une autre solution : la méthode open() de l'objet window
Je rappelle que window est l'objet racine donc il n'est pas obligatoire de l'écrire dans l'instruction.
Ainsi on écrit en général alert() et non pas window.alert() ...

Préférez vous une belle plagiste en bikini ou en trikini ou en monkini voire en burkini (lol) ?

Le code HTML de la 2ième solution

<select onchange ="fchoix()" size = "4" id ="choix"> <option value ="bikini">En bikini</option> ... </select>

Le script de la 2ième solution

function fchoix() { var choix = document.getElementById("choix"); switch(choix.value) { case "bikini" : window.open("bikini.htm") ; break ; case "trikini" :window.open("trikini.htm") ; break ; case "monokini" :window.open("monokini.htm") ; break ; case "burkini" :window.open("burkini.htm") ; break ; } //fin switch } // fin fonction

La fonction JS se nomme fchoix.

La liste est référencée dans la fonction JS avec la méthode getElementById.
Dans le choix multiple emploi de la méthode open de l'objet window qui ouvre la nouvelle page dans un nouvel onglet.

Les pages bikini.htm, monokini.htm, ...

Le code est d'une simplicité enfantine.
Pour exemple la page "bikini.htm" :

... <body> <h1>Jolie fille en bikini</h1> <img src ="../images/bikini.jpg" alt ="jolie fille en bikini" width ="60%"/> </body> ...
Retour menu