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

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.

Exemple de redirection conditionnelle traité 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 correspondant

HTML :

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

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 !

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 de la deuxième solution

Le HTML :

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

Pour qu'il n'y ait pas de confusion avec la liste déroulante précédente, cette deuxième liste est identifiée choix.

Le script :

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.
Retour menu