Il arrive parfois que certains sites affichent "Loading..." puis que la page réelle arrive ensuite. Cela est possible grâce à l'événement onLoad de la page. En effet, lorsque la page a fini de se charger, il est possible d'exécuter certaines instructions, comme, par exemple, une demande de mot de passe ou le chargement d'une autre page.
Voyons donc comment "Jouer avec les cadres".
Imaginons une page découpée (grâce à frameset) en quatre parties ayant les noms suivants :
haut
gauche
droite
bas
Premier exemple : Loading devient Bonjour
Le cadre gauche contient le fichier menu.htm
Le cadre haut contient le fichier bandeau.htm
Le cadre droit contient le fichier loading.htm
Le cadre bas contient le fichier infos.htm
Le fichier bandeau.htm est très gros car, par exemple, il charge en mémoire un tableau de noms, de profils et d'adresses électroniques. Pendant ce chargement, la partie droite affiche "Loading..." centré au milieu de la page, pour faire patienter l'utilisateur. Lorsque bandeau.htm a fini son chargement, il faut que la page loading.htm soit remplacée par la page accueil.htm. Or le fichier loading.htm est située dans la frame droite. Donc il faut remplacer le fichier de la frame droite.
Pour arriver à faire cela, il suffit d'indiquer dans la balise <BODY> du fichier bandeau.htm : onLoad="top.droite.location.href='accueil.htm'" Ainsi, dès que la page bandeau.htm sera chargée dans la frame haut, on procédera au remplacement du fichier de la frame droite en mettant accueil.htm à la place de loading.htm.
Ce qui donnerait, par exemple, la balise body du fichier bandeau.htm : <BODY onLoad="top.droite.location.href='accueil.htm'"> Cette instruction indique de mettre la page accueil.htm dans la frame droite. Deuxième exemple : deux cadres sinon rien
Imaginons maintenant que les cadres gauche et bas doivent changer... Il est vrai que la plupart du temps, lorsque vous cliquez sur un lien situé dans la partie droite, la nouvelle page apparaît dans cette même partie droite... mais nous voulons faire mieux...
Deux possibilités :
On utilise la même technique que ci-dessus en mettant dans la balise body de la nouvelle page les deux instructions provoquant ces changements separées par un point-virgule :
<body onLoad="top.gauche.location.href='newgauche.htm'; top.bas.location.href='newbas.htm'">
On utilise une fonction qui effectue les deux changements :
Supposons que dans notre précédente page accueil.htm, l'utilisateur s'est identifié et a cliqué sur un bouton de validation. On aura pris soin de stocker son nom dans une variable stockée dans le cadre haut et appelée user, par exemple, grâce à "top.haut.user=choix;".
Il faut maintenant modifier le cadre gauche et le cadre bas (le cadre droite se modifiera tout seul puisque c'est lui qui a le lien) afin de proposer les pages correspondantes à son profil...
L'idéal est de passer par une fonction, appelée dans la balise <BODY> de la nouvelle page.
Supposons donc que le cadre bandeau contiennent des "Array", ou tables, appelées A_gauche, A_bas et A_nom contenant respectivement les noms des pages à charger dans les cadres gauche et bas et les noms des utilisateurs.
Code en JavaScript :
<script language="JavaScript"> <!-- function change() { // recherche du nom de l'utilisateur dans la table des noms // en position zéro, on pourra mettre les valeurs par défaut // par exemple : // A_nom[0]="Anonymous"; // A_gauche[0]="gauche_std.htm"; // A_bas[0]="bas_std.htm"; // ainsi, les utilisateurs non identifiés auront ces pages standards j=0; for (i=1;i<=top.haut.A_nom.length;i++) { if (top.haut.user==top.haut.A_nom[i]) {j=i;} } // changement des cadres en fonction de cette recherche top.gauche.location.href=A_gauche[j]; top.bas.location.href=A_bas[j]; } //--> </script>
A noter :
Les exemples ci-dessus utilisent tous l'événement onLoad de la page, mais il est bien sûr possible de "Jouer avec les cadres" en utilisant les liens habituels. Ainsi, si vous voulez changer les cadres gauche et bas sur un simple clic, il suffit de faire : <A HREF="javascript:change()">Jouer avec les cadres</A>
ou
<A HREF="javascript:top.gauche.location.href='newgauche.htm'">Jeu à gauche</A> A vos claviers... Et amusez-vous bien avec les cadres...
Forum |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Annuaire
