Dialogue entre fenêtres mère et fille

Soyez le premier à donner votre avis sur cette source.

Vue 5 497 fois - Téléchargée 507 fois

Description

J'ai perdu beaucoup de temps à trouver sur le web les différents manières de dialoguer entre fenêtres.
Voici un petit exemple qui montre comment on peut le faire assez simplement.
Le principe est le suivant: il faut disposer de la référence aux objets 'Window' concernés.
Dans la fenêtre mère, il faut la retenir dans une variable avec une instruction de la forme:
win = open(...)
et dans la fenêtre fille, on l'a directement dans la propriété 'opener' (de l'objet 'Window' local).
On peut alors accéder directement aux variables et fonctions globales de ces objets.

Le test rudimentaire proposé ne fait pas la gestion de plusieurs fenêtres filles: le dialogue y est limité à la dernière ouverte.

Le test à l'air de bien fonctionner avec IE, Firefox, Google Chrome, Opera et Safari. Attention: avec Google Chrome, il faut que les fichiers html se trouvent sur un 'Serveur' (problème en 'local').

Source / Exemple :



                          • fichier 'index.html'
<!DOCTYPE html> <html> <head> <title>Fenêtre mère</title> <meta name='Author' content='William VOIROL, Switzerland, Oct 2011'/> <script type="text/javascript"> var win,num=0,secret='Secret de la mère ...'; function GetM(txt) {document.getElementById('zon').innerHTML=txt;} function OpenW() {win=open('fille.html','','height=300,width=464,menubar=0');} function SendM() {win.GetMes('Message n°'+(++num)+' de la fenêtre mère')} function Avis() {document.getElementById('zon').innerHTML=win.avis} </script> </head> <body style='background-color:yellow;'> <div> <input type='button' onclick='OpenW()'value='Ouvrir une fenêtre fille'/><br/><br/> <input type='button' onclick='SendM()'value='Envoyer un message à la fille'/><br/><br/> <input type='button' onclick='Avis()'value='Lire la variable "avis" de la fille'/><br/><br/> </div> <div id='zon' style='background-color:white'>Massages:</div> <div><br/><a href='http://www.william-voirol.ch/Prog/Tests/Dialog.zip'>Zip du code</a></div> </body> </html>
                          • fichier 'fille.html'
<html> <head> <title>Fenêtre fille</title> <meta name='Author' content='William VOIROL, Switzerland, Oct 2011'/> <script type='text/javascript'> var num=0,avis='Avis de la fille ...'; function GetMes(txt) {document.getElementById('zon').innerHTML=txt} function SendMes() {opener.GetM('Message n°'+(++num)+' de la fenêtre fille')} function Secret() {document.getElementById('zon').innerHTML=''+opener.secret} function SendD() { opener.GetM('Prénom: "'+document.getElementById('pre').value +'" &nbsp; &nbsp; Nom de famille: "'+document.getElementById('fam').value+'"') } </script> </head> <body style='background-color:#CCCCCC'> <div> <input type='button' onclick='SendMes()'value='Envoyer un message à la mère'/><br/><br/> <input type='button' onclick='Secret()'value='Lire la variable "secret" de la mère'/><br/><br/> <input type='text' id='pre' style='width:200px'/> Prénom<br/> <input type='text' id='fam' style='width:200px'/> Nom de famille &nbsp; &nbsp; &nbsp; <input type='button' onclick='SendD()'value='Envoyer'/><br/><br/> </div> <div id='zon' style='background-color:white'>Messages:</div> </body> </html>

Conclusion :


Beaucoup d?exemples du web proposent de créer un tag invisible tel que <input id=?zut?>, et d'y accéder à l'aide de
win.document.getElementById('zut').value
Il me semble que l'accès aux variables et fonctions globales est plus simple et plus général.
En effet, on ne se limite pas seulement à l'échange de donnés, mais on peut demander à une autre fenêtre d'accomplir une tâche.

Faites directement un test: (observez la remarque ci-dessous)
http://www.william-voirol.ch/Prog/Tests/Dialog
Remarque: de temps en temps, des espaces (caractères blancs) s'immiscent
dans certains textes. (CodeS-SourceS est au courant du problème).
Si c'était le cas ici, enlevez les espaces avant d'utiliser l'adresse Web ci-dessus.

L'exemple complet se trouve sur le fichier zip (3 Ko).

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
mardi 10 août 2004
Statut
Membre
Dernière intervention
24 août 2004

Bonjour,
merci pour ce programme qui me rendra bien service tel qu'il est.
Bonne continuation.

Benali
Messages postés
7
Date d'inscription
lundi 5 mai 2008
Statut
Membre
Dernière intervention
4 novembre 2012

Excellent bout de code !!

C'est exactement ce qu'il me fallait pour améliorer un petit site que je développe :)
Je prends ton .zip et je verrais ce soir l'adaptation.

Pour le problème d'enregistrement, je ne vois pas vraiment ce que MacGaliver veut dire, mais en ce qui me concerne, je pense le couplé à un bout d'Ajax.
Bref, merci :D
Messages postés
13
Date d'inscription
mardi 13 juillet 2004
Statut
Membre
Dernière intervention
21 juillet 2008

très clair et pédagogique.
merci pour ce beau petit code !
Personnellement, pas la peine d'aller plus loin, à chacun de voir si un enregistrement de message serait utile.
Messages postés
146
Date d'inscription
vendredi 28 mai 2010
Statut
Membre
Dernière intervention
21 juillet 2013
3
Bonjour,

Bon départ, mais je trouve que serait mieux dans le cas où le message s'enregistrerait (mais il faudrait un ActiveX sous fichier hta de préférence).

Note: Si vous débutez en informatique j'avoue que c'est pas facile (je suis aussi passé par là)

;) Cordialement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.