Comment rafraîchir une page à partir d'une fenêtre ouverte par cette même page...
Devant les demandes de plus en plus nombreuses, il m'a paru intéressant de construire deux exemples sur le rafraîchissement d'une page. Voyons donc ces deux cas de figure ensemble...
Commençons par un exemple simple. Une page qui ouvre une fenêtre demandant à l'utilisateur de saisir son pseudo et, après saisie, qui actualise la page ayant demandé l'ouverture de cette fenêtre.
Bien sûr cette simple fonction aurait pu être réalisée grâce à l'instruction "prompt" mais le but de cette page est de montrer l'utilisation de la fonction reload(true).
Page principale
Cette page est découpée en deux frames, une pour stocker la variable que nous allons manipuler et l'autre pour l'afficher. La frame du haut contient, dans son "header", une variable nommée "pseudo". À l'ouverture de la frame du bas, si cette variable est vide, une fenêtre s'ouvre afin de la saisir.
<html> <head> <script language="javascript"> // une simple réservation de variable var pseudo=""; </script> </head> </html>
Frame du bas (bas.htm)
<html> <head> <script language="javascript"> function saisie_pseudo() // si la variable pseudo n'est pas vide, alors, on ne fait rien // si elle est vide, on ouvre une fenêtre pour la saisir {if (top.wvars.pseudo!="") {return;} saisie=window.open("saisie.htm","Saisie","width=300,height=200");} </script> </head> <!-- sur chargement de la page, on vérifie que pseudo est saisi --> <body onLoad="saisie_pseudo()"> <!-- dans le corps de la page, on l'affiche s'il est non vide --> <script language="javascript"> if (top.wvars.pseudo!="") {document.write("Bonjour ",top.wvars.pseudo);} </script> </body> </html>
Page de saisie du pseudo (saisie.htm)Cette page s'ouvre dans une fenêtre. L'utilisateur saisit son pseudo et clique sur "Valider". Son pseudo est alors stocké dans la frame du haut dans la variable "pseudo", la frame du bas est actualisée (elle va donc afficher "Bonjour pseudo") et la fenêtre est fermée.
<html> <head> <script language="javascript"> function valider() // lors de la validation, on affecte la valeur saisie à la variable pseudo {opener.top.wvars.pseudo=document.frm.pseudo.value; // puis on recharge la frame du bas opener.top.visu.location.reload(true); // et enfin on ferme cette fenêtre de saisie self.close();} </script> </head> <body> <form name=frm> <font face="Arial, Verdana" size="2">Votre pseudo : <input type=text size=10 name=pseudo> <a href="javascript:valider()">Valider</a></form> </body>
Si vous avez bien compris ce premier exercice, passons maintenant au second...