Les Fenêtres 1. A quoi ça sert ?
On va ici voir la partie concernant les fenêtres, aussi bien la fenêtre courante que les nouvelles fenêtres. Pour chaque exemple, on verra les différentes options proposées, ainsi qu'un exemple de code et d'utilisation. 2. Affichage d'une fenêtre pop-up
2. 1. Présentation
L'intérêt des fenêtres pop-up est simple : afficher une nouvelle fenêtre pour présenter dans une page sans menu, sans barres d'outils... Je m'en sers pour afficher les jaquettes des DVDs afin de pouvoir naviguer de l'un à l'autre. Voici le code Javascript associé à l'ouverture d'une nouvelle fenêtre : <script language="JavaScript"> <!-- debut du script var fenetreErreur; function affichImg(message,largeur, hauteur) { fenetreErreur = window.open(message, 'titre', 'toolbar=no,location=no,directories=no, status=no,scrollbars=yes,resizable=no,copyhistory=no,' + 'width='+ largeur + ',height='+hauteur); fenetreErreur.moveTo(50,50); fenetreErreur.focus(); return false; } // Fin du script --> </script> Ensuite, il suffit de mettre un lien qui gère l'affichage de la page dans la fenêtre pop-up : <a href="javascript:affichImg('/images/std/accueil2.gif',200,330)">Ouverture de l'image</a>
Ce qui donne comme résultat : Ouverture de l'image de la page d'accueil dans une nouvelle fenêtre 2. 2. Explication
Déjà, on voit la ligne function afficheErreur(message,largeur,hauteur). Cette ligne permet de définir les variables passées en paramètre pour la fonction en question. Ces paramètres sont utilisés plus loin dans la fonction afin de préciser le message (en l'occurrence le nom du fichier à charger), la hauteur et la largeur de la fenêtre. Ensuite, on fait un window.open dans la variable fenetreErreur, définie juste au dessus (avec le "var"). De nombreux paramètres sont passés au window.open :
La fonction "moveTo(50,50)" permet de déplacer la fenêtre qui vient d'être créer à la position 50 en abscisse et 50 en ordonnée. Ceci est très pratique pour éviter que la fenêtre soir positionnée n'importe où par le navigateur. Enfin, la fonction "focus" permet simplement de définir la page qui vient d'être créée comme page ayant le focus, c'est à dire étant au premier plan, et avec la barre des titres activée. 3. Affichage d'une fenêtre pop-up et raffraichissement de la fenêtre principale
Nous venons de voir le principe de la fenêtre pop-up. Dans certains cas, comme la gestion d'une base de donnees, il peut être pratique d'ajouter des éléments dans une fenêtre et d'automatiquement raffraichir la fenêtre principale pour faciliter la lecture des utilisateurs. Pour ce faire, il suffit de reprendre le code d'ouverture de la fenêtre pop-up précédente, et d'ajouter dans le code de la fenêtre le code suivant : <script language="JavaScript"> <!-- debut du script document.parent.reload(); // Fin du script --> </script> ou <script language="JavaScript"> <!-- debut du script window.opener.reload(); // Fin du script --> </script> La meilleure chose est de passer ce code javascript juste après la mise à jour de la base de données, donc sur la page qui est appelée dans votre formulaire. Sinon, pour essayer, voici le code que vous pouvez tester pour la fenêtre principale : <html> <head> <title>Ouverture de Pop-up</title> </head> <body> <script language="JavaScript"> <!-- debut du script var fenetreErreur; function affichImg(message,largeur, hauteur) { var fenetreOption = 'toolbar=no,location=no,directories=no,status=no,width='+largeur+',height='+hauteur; fenetreErreur = window.open(message,'titre',fenetreOption); fenetreErreur.moveTo(50,50); fenetreErreur.focus(); return false; } // Fin du script --> </script> <a Href="" onClick="return affichImg('./test.html',330,200)">test de Raffrachissement</a> </body> </html> Et celui de la fenetre pop-up <html> <head> <title>Test de raffraichissement</title> </head> <body> <input type=button value="Raffraichir la page" onClick="javascript:window.opener.location.reload();"><br> <input type=button value="Page d'accueil" onClick="javascript:window.opener.location='http://www.hobbesworld.com';"><br> </body> </html> Page modifiée le : 24/07/2003
Site modifié le : 14/09/2020
|
