Transférer des informations : fenêtre parent <-> fenêtre enfant

Version imprimable

1 pièce(s) jointe(s)

Citation:
Section : La gestion des fenêtres et des frames

Q : Comment transmettre des données d'une fenêtre parent vers une fenêtre enfant et réciproquement ?

R :
1ère possibilité :
Fenêtre enfant ouverte avec window.open().
Pièce jointe : exemple avec test de la présence de la fenêtre fille (ouvrez varMereFille.htm).
Un bug dû à l'utilisation de document.write() dans le fichier varFilleMere.htm a été corrigé ;)
2ème possibilité :
Fenêtre enfant ouverte avec showModelessDialog()
3ème possibilité :
La page enfant est contenue dans une iframe :
frameMere.htm
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <iframe id="maFrame" name="maFrame" src="frameFille.htm" style="height: 150px; width: 300px"> </iframe> <br> <input type="button" value=">>Frame fille" onclick="transfertVersFille()"> <br><br> Valeur transmise : <div id="idDivParent"></div> </body> </html>
frameFille.htm
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <input type="button" value=">>Frame Parent" onclick="transfertVersParent()"> <br><br><br> valeur transmise : <div id="idDiv"></div> </body> </html>
Remarques :
Dans le troisième cas : préciser les attribtuts id et name de l' iframe (leur donner les mêmes valeurs).
Les codes 1-2-3 ont été testés sous IE et Firefox.

02/04/2007, 17h54
Auteur

1 pièce(s) jointe(s)

Voici une autre application des codes ci-dessus.

Citation:

Q : Comment naviguer dans une pop-up et transmettre les informations à la fenêtre mère?

But : Il s'agit de naviguer dans une pop-up sans perdre l'opener.
Code : cf. pièce jointe ou cette discussion

Remarques :
Le code a été testé sous IE et Firefox.

Dans ce cas, je gère le changement de l'url de la pop-up à partir de la page mère et non à partir de la page courante (pour justement éviter de perdre l'opener). Un exemple dans la pièce jointe (ouvrir le fichier varMere.htm).

Il y a une fenêtre mère qui ouvre une pop-up dans laquelle il y a des liens vers les pages suivantes ou précédentes.

Pour éviter que l'utilisateur ouvre plus d'une fenêtre fille je teste sa présence (fonctions charge() et decharge() des fichiers varFille1.htm, varFille2.htm, varFille3.htm).

Par contre, je ne vérife pas la présence de la fenêtre mère avant l'envoi des infos.
02/04/2007, 18h16
FremyCompany

Le plus simple c'est la

Code:

<FRAMESET><FRAME id="contentFrame" name="contentFrame"></FRAME></FRAMESET><script>document.frames.contentFrame.src=params.src;</script>

params étant un object contenant les variables passées par GET (?src=...)

Ensuite parent.opener et popup.frames....
02/04/2007, 22h46
Auteur

Citation:

Envoyé par FremyCompany

Le plus simple c'est la

Code:

<FRAMESET><FRAME id="contentFrame" name="contentFrame"></FRAME></FRAMESET><script>document.frames.contentFrame.src=params.src;</script>

params étant un object contenant les variables passées par GET (?src=...)

Ensuite parent.opener et popup.frames....

:aie:
que voulez que je réponde à ça ??? :arf:

:dehors: :lol:

Citation:
Q : Comment transférer des données d'une iframe vers une autre ?

R :
Soit la fenêtre parent possédant 2 iframes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <h3>IFrame haut :</h3> <iframe id="frame_haut" name="frame_haut" src="IFrameHaut.htm" style="height: 200px; width: 400px"> </iframe> <div><br /></div> <h3>IFrame bas :</h3> <iframe id="frame_bas" name="frame_bas" src="IFrameBas.htm" style="height: 200px; width: 400px"> </iframe> </body> </html>
Code de IFrameHaut.htm :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <label>Valeur :</label><input type="text" value="" id="inputFrameHaut"/> <input type="button" value=">> Frame Bas" onclick="transfertVersIFrameBas()"/> <br><br> <label>Résultat :</label> <textarea rows="2" cols="20" id="InsererHaut"> </textarea> </body> </html>
Code de IFrameBas.htm : (quasi identique à celui de IFrameHaut, seul le nom des variables change).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <label>Valeur :</label><input type="text" value="" id="inputFrameBas"/> <input type="button" value=">> Frame Haut" onclick="transfertVersIFrameHaut()"/> <br><br> <label>Résultat :</label> <textarea rows="2" cols="20" id="InsererBas"> </textarea> </body> </html>
Remarques :
- bien préciser à la fois le name et l'id des iframes en leur donnant les mêmes valeurs ;
- j'utilise une fonction implémentée dans la fenêtre parent comme moyen de transfert des données. Cette fonction prend deux paramètres : la valeur à transmettre (valeur) et le nom de l'iframe (idIFrame). Dans cette fonction j'appelle la fonction affiche(valeur) qui est implémentée dans les deux iframe ;
- il faut que tous les fichiers soient sur le même domaine.

26/06/2009, 14h33
bebest93

J'ai une question à rajouter :

Comment naviguer de page mère en page mère en ayant possibilité d'envoyer des infos vers un même pop up ?
27/06/2009, 14h18
Auteur
Naviguer de page mère en page mère :koi: C'est à dire ?

Tu ne peux transmettre les informations d'une fenêtre à une autre uniquement s'il y a un lien de parenté.

Trois cas de figures :
- ta page mère ouvre deux pop-up :
  et dans ce cas tu peux envoyer des informations d'une pop-up à une autre mais tu dois transiter par la fenêtre mère (le lien de parenté entre les pop-up est la fenêtre mère)
- ta fenêtre mère ouvre une pop-up qui à son tour ouvrira une pop-up. Dans cas la communication se fera de cette manière :
  Code:
  
  1 2 page mère <----> pop-up1 <----> pop-up2
  si tu perds la pop-up1 la pop-up2 ne sera plus en mesure de communiquer avec la page mère
- 3 ème cas de figure :
  ta fenêtre mère ouvre une pop-up qui à son tour ouvrira une pop-up (comme précédemment). Mais en plus, tu transmets à la fenêtre mère l'objet pop-up2 et dans ce cas là tu pourras envoyer des informations selon ce schéma (cf. pièce jointe)
27/06/2009, 17h47
bebest93

Citation:

Naviguer de page mère en page mère C'est à dire ?

Par exemple, on est sur une page et on ouvre un pop up en lui transmettant une information. Puis on change de page et on transmet une nouvelle information à ce même pop up.

Je ne sais pas s'il est possible de "nommer" le pop up de sorte à ce qu'on puisse communiquer avec lui depuis n'importe quelle page.

J'ai déjà vu des sites utiliser ce principe (des sites de musique) : on ouvre une première musique en lecture dans un pop up. Puis on change de page et on peux ajouter des musiques à la playlist dans ce même pop up.
ex : http://www.eazyk.com

Je n'ai pas regardé comment fonctionnait le site....

J'ai fait ceci un peu à la va-vite mais ça marche (il y a des choses à améliorer) :
A.htm :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var fen = null; 
function popup()
{
        fen = window.open("C.htm","","width=300,height=100,top=200,left=200");
}
 
function envoi()
{
        var txt = document.getElementById("texte_Envoye").value;
        fen.reception(txt);
}
 
function ouvrirB()
{
        if (fen!=null)
                fen.changeURLpageMere(fen);     // c'est la pop-up qui se charge de modifier l'url de la page mère
}
//-->
</script>
 
</head>
 
<body>
 
<div>
	<h1>A.htm</h1>
	<h2>1- Ouvrir pop-up</h2>
	<input type="button" onclick="popup()" value="ouvrir popup" />
	<br/><br/><br/>
	<h2>2- Entrer le texte et l'envoyer ver la pop-up</h2>
	<input type="text" value="" id="texte_Envoye"/>
	<input type="button" onclick="envoi()" value=">> popup" />
	<br/><br/><br/>
	<h2>3- changer l'url de la page mère</h2>
	<span style="color:#0000FF;cursor:pointer" onclick="ouvrirB()">ouvrir B.htm</span>
</div>
 
</body>
</html>

B.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var fen = null;
function initObjFen(fenObj)     //b.htm reçoit l'objet fen (pop-up) pour pouvoir communiquer avec elle
{
        fen = fenObj;
}
function envoi()
{
        var txt = document.getElementById("texte_Envoye").value;
        fen.reception(txt);
}
 
//-->
</script>
 
</head>
 
<body>
 
<div>
	<h1>B.htm</h1>
	<h2>4- Envoyer un nouveau texte vers la pop-up</h2>
	<input type="text" value="" id="texte_Envoye"/>
	<input type="button" onclick="envoi()" value=">> popup" />
</div>
 
</body>
</html>

C.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
 
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
function reception(txt)
{
        document.getElementById("texte_recu").value = txt;
}
 
function changeURLpageMere(fenObj)
{
        window.opener.document.location.href="B.htm";                                           // on modifie l'url de la page mère (opener)
        setTimeout(function(){window.opener.initObjFen(fenObj)},"1000");        // on attend 1s avant d'envoyer l'objet fen à B.htm (temps d'ouverture de B.htm)
}
 
//-->
</script>
 
</head>
 
<body>
 
<div>
	<input type="text" value="" id="texte_recu"/>
</div>
 
</body>
</html>

Enregistre A.htm, B.htm et C.htm sur ton disque.
Lance A.htm dans ton navigateur et suis les instructions.

Comment ça marche ?

A.htm va ouvrir C.htm qui est ma pop-up. La communication de A vers C se passe de la manière la plus classique (cf. les exemples précédents)
tu vas ensuite cliquer sur le lien B.htm. C'est C.htm qui se charge de modifier l'url de la page mère :
- Au moment du clic tu transmets à la pop-up l'objet fen (objet retourné par la méthode open())
- Tu ouvres B.htm en modifiant l'url de l'opener
- Pour que B et C communiquent entre eux, je transmets à B l'objet fen qui a été transmis par A précédemment. Sinon B.htm ne connait pas C.htm.

C'est tordu comme truc mais ça marche :aie: (sous IE 8 et FF au moins).

Le plus simple à mon avis est de garder la même page mère (=même url) et de modifier son contenu par du PHP ou AJAX ;)

Je viens de rencontrer un cas particulier !

Les scripts ce-dessus fonctionnent à priori pour des frames, iframe et window.open ...

Je me suis penché sur l'inclusion d'une page html au moyen d'une balise object en type text/html:

la page "mère" contenant la balise object:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Page mère</title> <script type="text/javascript"> function bar(){ var HTMLObj=(document.all)?document.getElementsByTagName('object')[0]:document.getElementsByTagName('object')[0].contentDocument; var newNode=HTMLObj.createElement('div') var innerNode=HTMLObj.createTextNode('Coucou') newNode.appendChild(innerNode) HTMLObj.body.appendChild(newNode) HTMLObj.getElementById('funky').value='Spacefrog' alert(HTMLObj.getElementById('funky2').value) } </script> </head> <body> <object name='foo' id="foo" data="nouvelle_page_2.htm" type="text/html" width="300" height="200"> </object> <input type='button' onclick='bar()' value ="go" /> </body> </html>
la page "fille"
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>fifille</title> </head> <body> bonjour <input type="text" id="funky" value=""/> <input type="text" id="funky2" value=""/> </body> </html>
La mère sait converser avec la fille.
Pour le moment je n'ai pas encore trouvé à partir de la fille

à priori c'est très simple il suffit de passer par

Code:

top.document.getElementById('bidule_de_page_mere')

20/09/2013, 23h51
livebe

transférer des données d'une iframe vers une autre

Suite à ma question: http://www.developpez.net/forums/d13...frame-contenu/

Je teste la méthode décrite avec IFrameHaut et IFrameBas.
1/ OK avec SeaMonkey
2/ KO avec Chrome 29

Mais en regardant de plus près cette méthode, ainsi celle de SpaceFrog, je m'aperçois que le passage d'info de père à fille se fait via un input type id.

Or dans "mon" cas de figure je passe l'info dans la fonction d'appel:

Code:

<a href="#" onclick="PasseInfo('UNOXok');return false;"><img src="img/UNOXok/1.jpg"></a>

Par ailleurs, la méthode de SpaceFrog me paraît inappropiée dans mon cas, l'iframe menu comportant des centaines de vignettes.

Une solution cross-browser?

Merci