LE LANGAGE JAVASCRIPT LES FENETRES
OBJECTIFS DE LA FORMATION : Savoir générer et modifier des fenêtres par le JavaScript
PROGRAMME Génération et modification de fenêtres Réécriture du document en cours Ecriture du document en cours de chargement Réécriture d'un document qui a fini de se charger Génération d'une nouvelle fenêtre 1er cas 2ème cas
Génération et modification de fenêtres (1/2) Lorsqu'on lance le navigateur, il cherche à afficher une page prédéterminée et, s'il ne peut y parvenir, il affiche une page d'erreur. Donc, le navigateur affiche toujours une page. Et si on ferme cette page on arrête le navigateur. Une page est un objet window et l'on sait que cet objet possède des propriétés et en particulier l'objet document. Pour modifier un affichage sur l'écran, on peut soit réécrire la partie document de la page en cours, soit créer une autre page (un autre objet window) et composer son propre objet document.
Génération et modification de fenêtres (2/2) Nous aurons donc deux instructions open possibles : l'une au niveau window (window.open(…)) pour ouvrir s'il y a lieu une nouvelle fenêtre l'autre au niveau document (ident_window.document.open()) pour écrire les instructions HTML et éventuellement des fonctions JavaScript devant constituer la totalité du nouveau document à afficher On peut donc réécrire le contenu d'un document à partir d'un script Javascript, que ce soit sur l'objet window en cours ou sur un nouveau.
Réécriture du document en cours (1/2) Ecriture du document en cours de chargement Exemple : <html><body bgcolor=yellow><br><br><br><br><br><br><br><br> <H2>ceci est la fenêtre initiale</H2> <script> window.document.open(); window.document.write("<html><body bgcolor=lime>"); window.document.write("ceci est la réécriture du ocument<br>"); window.document.write("</body></html>"); window.document.close(); </script></html> Ici, on complète le document initial mais on ne le réécrit pas car l'exécution du script se déroule alors que le chargement du document initial n'est pas terminé. Remarque : les open() et close() sont sans effet. On visualise donc les deux textes simultanément : ceci est la fenêtre initiale ceci est la réécriture du document
Réécriture du document en cours (2/2) Réécriture d'un document qui a fini de se charger Exemple : ... ... <script> function reecriture() { window.document.open(); window.document.write("<html><body bgcolor=lime>"); window.document.write("ceci est la réécriture du document<br>"); window.document.write("</body></html>"); window.document.close(); } </script></head> <body bgcolor=yellow> <br><br><br><br><br><br><br><br> <H2>ceci est la fenêtre initiale</H2> NOM : <input type='text' value='cliquez ici pour réécriture' onclick="reecriture()"> </html> A noter que la réécriture se déclenche sur un clic de l'utilisateur, c'est à dire après le chargement terminé de la page et du document initial. Il y a alors une réécriture complète du document.
Gestion des fenêtres et popup Le mot popup peut être traduit par fenêtre surgissante. L'ouverture de cette fenêtre est déclenchée par un événement utilisateur (clic, ouverture de site, minuterie, ...) via une seule ligne de code javascript. Un popup est ouvert grâce à la méthode (ou fonction) appelée sur l'objet window. Cette fonction attend 3 paramètres : window.open( page [,nom] [,options] )
Gestion des fenêtres et popup Ici, il va falloir enchaîner l'ouverture de la nouvelle fenêtre et l'ouverture et l'écriture de son document. 1er cas : Le contenu de la nouvelle fenêtre se trouve dans un fichier HTML. Il suffit alors de le citer à l'ouverture. Et l'ouverture du document est implicite. Exemple : ... ... <head> <script>fen = window.open("pasvide.htm","","toolbar=yes, location=no, status=no, menubar=no, Width=250, Height=100, scrollbars=no"); </script> </head> <body><br><br><br><br><br><br><br> <H2>ceci est la fenêtre initiale</H2> </body></html>
Gestion des fenêtres et popup 2ème cas : Le document est entièrement décrit dans le script du document initial et générateur de la nouvelle fenêtre. Exemple qui ferme la fenêtre que l'on vient d'ouvrir à partir de la première fenêtre <HTML><SCRIPT LANGUAGE="JavaScript"> var new_win = null; // déclaration a l'extérieur de la fonction pour qu'elle soit accessible ailleurs // Initialisation à null pour symboliser qu'aucune fenêtre n'est ouverte function ouvre() { var option = "width=300,height=150,resizable=yes"; new_win = window.open("","new",option); new_win.document.write("<HTML>\n<BODY>"); new_win.document.write("<H2>J'écris dans cette fenêtre à partir de la 1ère fenêtre</H2>"); new_win.document.write("</BODY>\n</HTML>"); } function ferme() { if (new_win != null) // teste si une fenêtre a déjà été ouverte new_win.close(); } </SCRIPT> <BODY> <FORM NAME="test"> <INPUT TYPE="button" VALUE="Ouvrir une fenêtre" onClick="ouvre();"><BR><BR> <INPUT TYPE="button" VALUE="Fermer la fenêtre" onClick="ferme();"> </FORM></BODY></HTML>
Gestion des fenêtres et popup Centrer un popup Voici comment centrer un popup : function PopupCentrer(page,largeur,hauteur,options) { var top=(screen.height-hauteur)/2; var left=(screen.width-largeur)/2; window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);} Popup toujours visible Pour forcer le popup a rester toujours visible, il suffit d'ajouter ce code dans la balise <BODY> de la page du popup : onblur="window.focus()" La seule solution pour s'en débarrasser est de le fermer complètement.
Gestion des fenêtres et popup Communiquer avec la fenêtre appelante Depuis le popup il est possible d'atteindre l'objet window de la fenêtre appelante grâce à window.opener. On peut ainsi modifier le contenu de la fenêtre appelante ou récupérer des informations du popup pour les replacer dans un formulaire de la fenêtre appelante. Syntaxe : window.opener.document.forms["nom_form"].elements["nom_obj"].value
Fenêtre appelane (appelante.html) <HTML><HEAD> <SCRIPT type="text/JavaScript"> function OuvrirPopup(page,nom,option) { window.open(page,nom,option); } </SCRIPT></HEAD> <BODY bgcolor="white"> <FORM name='origine'> Votre choix <INPUT type="text" name="choix" disabled><BR> <INPUT type="button" value="Ouvrir le popup" onClick="OuvrirPopup('popchoix.html','popupchoix','width=300,height=150,menubar=no,status=no')"><BR> </FORM> </BODY></HTML>
Pop Up (popchoix.html) <HTML><HEAD> <SCRIPT language="javascript"> function Reporter(l) { var choix=l.texte.value; window.opener.document.forms["origine"].elements["choix"].value=choix; } </SCRIPT> </HEAD> <CENTER><BR><BR> <FONT SIZE="2" COLOR="navy" face=arial> <FORM name="rapport"> <input type="text" name="texte" onChange="Reporter(rapport);"/> </FORM> </FONT> </CENTER> </BODY></HTML>
RESUME DE LA FORMATION Nous avons appris : à générer des fenêtres à écrire dans des fenêtres vides à modifier le contenu de documents existants à gérer des popups