Dialogue entre fenêtres mère et fille

Télécharger le projet
Commenter

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).
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (William VOIROL)