[JavaScript] [FAQ] Transférer des informations : fenêtre parent <-> fenêtre enfant

[Auteur]

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 htlm :

  
  
  
  frameFille.htm
  
  
  
  Code 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.

[Auteur]

Voici une autre application des codes ci-dessus.

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.

[FremyCompany]

Le plus simple c'est la

Code HTML :

<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....

[Auteur]

Envoyé par FremyCompany

Le plus simple c'est la

Code HTML :

<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....

que voulez que je réponde à ça ???

[Auteur]

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

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

Code html :

Code de IFrameHaut.htm :

Code x :

Code de IFrameBas.htm : (quasi identique à celui de IFrameHaut, seul le nom des variables change).

Code x :

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.

[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 ?

[Auteur]

Naviguer de page mère en page mère 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)

[bebest93]

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

[Auteur]

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 html :

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 html :

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 html :

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 ?

1. 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)
2. 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 (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

[SpaceFrog]

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')