Maintenir la relation avec une popup, sur plusieurs pages

**Ricou13** · 14/03/2007, 22h59

Bonjour,

J'ai créé une popup avec window.open, à laquelle j'ai affectée un nom.
Depuis la page mère, je modifie le contenu de cette popup.

Jusque là, pas de problème. Seulement, lorsque je change la page de ma fenêtre mère, je perd le lien vers la popup qui n'est plus reconnue.

Pour imager disons que ma page mère est un magasin avec des liens de navigation (<< ... 4 5 6 7 8 ... >>) qui me permettent de changer de rayon.
La popup étant mon caddie. Lorsque je suis sur la page qui a créé le caddie, je peux y ajouter les aliments présents dans le rayon en question (modification de la popup depuis la page mère).
Mais, si je change de rayon (je passe à la page 7 par exemple), le lien qui existait vers mon caddie à disparu !
Attention, mon histoire de caddie est juste là pour vous donner le concept de fonctionnement. Cela n'a rien à voir avec un vrai caddie de boutique en ligne.

Cette perte de lien est logique puisque le fichier contenant "l'objet popup" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var MaPopup = window.open(...)

est rechargé et la variable est donc réinitialisée.

Ma question est la suivante : est-il possible de faire passer ce lien (cette référence, cet objet... ou je ne sais quoi) entre mes pages (par GET, POST, SESSION PHP ou autre) de façon à continuer d'utiliser ma popup sur plusieurs page de la fenêtre mère ?

Je suis comme les politiciens à l'assemblée : 2 heures de bla bla pour une question de 3 secondes

Merci pour vos lumières

**SpaceFrog** · 15/03/2007, 09h11

pour passer une variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MaPopup.document.getElementById('moninput').value = la variable

ou alors si tu as une variable globale dasn la popup:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

MaPopup.variableglobale=parametre

et depuis la popup en retour...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

self.opener.obj.value=variableretour

par exemple ...

Si tu as un cas plus précis, expose le ...

**Ricou13** · 15/03/2007, 10h23

Salut,

Merci pour tes réponses mais tout ça, je sais faire.
Voici un exemple concret :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <script type="text/javascript">
  var MaPopup;
 
  function CreerPopup(Nom)
  {
    MaPopup = window.open("", Nom, "width=300,height=300");
  }
 
  function TesterPopup()
  {
    if(MaPopup == undefined || MaPopup.name == null)
      alert("La popup n'existe pas !");
    else
      alert("La popup existe et s'appelle : " + MaPopup.name);
  }
 
  function CreerDiv()
  {
    if(MaPopup != undefined && MaPopup.name == "Pop")
    {
      var NewDiv = document.createElement("div");
      NewDiv.appendChild(document.createTextNode("Nouvelle Div"));
      MaPopup.document.getElementsByTagName("body")[0].appendChild(NewDiv);
      MaPopup.focus();
    }
  }
  </script>
  </head>
  <body>
 
  <input type="button" value="Creer Popup" onclick="CreerPopup('Pop');" />
  <input type="button" value="Ajouter Div" onclick="CreerDiv();" />
  <input type="button" value="Tester Popup" onclick="TesterPopup();" />
  </body>
</html>

Le premier bouton crée une popup,
Le second y ajoute des div (à ce propos le focus ne fonctionne pas ?)
Le troisième vérifie l'existence de la fenêtre

Tout marche nickel sauf si je recharge la page mère (pour simuler une pagination par exemple). Là, le test d'existence echoue car la variable "MaPopup" ne contient plus rien.
C'est normal puisque le Javascript à été rechargé et que la variable a donc été réinitialisée.

J'aimerais pouvoir stocker quelque part le contenu de "MaPopup" pour pouvoir le récupérer au rechargment

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  <script type="text/javascript">
  if(Stockage existe)
     var MaPopup = Stockage;
  else
     var MaPopup = null;
 
  function CreerPopup(Nom)
  ...

et ainsi récupérer le lien vers la popup.

**SpaceFrog** · 15/03/2007, 10h33

ha ben normal car la variable popup est une variable dela page mère si tu fermes ou tu quittes la page mère cette variable est détruite ...

Sous IE tu pourrait essaye de mettre la popup en variable navigator ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

navigator.MaPopup=window.open ...

comme ça mêem quand tu quiite la page la variable subsiste ...
mais c'est exclusif IE

as tu essayé de faire un test sur le nom de la popup voir si elle existe ?
gerne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(parent.nom)

sinon il faut passer en paramètre du lien ... voir dasn la FAQ comment passer et recupérer les paramètres dans l'url ...

**Ricou13** · 15/03/2007, 10h39

Envoyé par SpaceFrog

Sous IE tu pourrait essaye de mettre la popup en variable navigator ...

Il faut que cela fonctionne aussi sous FF et les autres

Envoyé par SpaceFrog

sinon il faut passer en paramètre du lien ... voir dasn la FAQ comment passer et recupérer les paramètres dans l'url ...

Certes mais là, il ne s'agit pas de passer une chaine de texte (comme le nom de la popup par exemple) qui ne me servirait à rien.
C'est carrément un objet qui doit transiter...

**SpaceFrog** · 15/03/2007, 10h43

oui je ne penses pas que tu puisse transiter l'objet ...
mais dire que le nom serait inutile je n'en suis pas si sur ?...

je teste ...

**Ricou13** · 15/03/2007, 10h45

Je l'ai déjà fait.

Javascript t'interdit d'accéder à une fenêtre que tu n'a pas créé pour éviter que tu ne manipule les fenêtre des autres sites...

**SpaceFrog** · 15/03/2007, 11h06

arf oui j'étais resté sur un simple test d'existance ...

...

dans ton cas je ne vois qu'une solution ...

la première récupérer le innerHTML du body de ta popup dans un string de la mère (

) ou un input et le passer en paramètre ou valider un form puis rouvrir une popup et lui coller le innerHTML

**Ricou13** · 15/03/2007, 11h17

Attend, j'ai une piste qui me semble intéressante.

Il semblerait que si l'on recrée une fenêtre qui existe déjà, le lien se reconstruit.

Par exemple, tu crée la fenêtre et tu lui ajoute 2 div.
Puis tu recharge la page.
Le test indique que la popup n'existe pas.
Mais si tu recrée la popup, le lien est regénéré.
Tu peux donc ajouter une 3eme div !

Seulement cela ne fonctionne que si tu n'envoie pas d'url dans le window.open car, sinon, le contenu est écrasé.

il faut donc créer une fonction qui

1) Ouvre une popup sans url
2) récupère l'url de ladite popup
3) Si l'url est vide => la popup n'existait pas, on lui affect la vraie url
4) Si l'url n'est pas vide et correspond à ce qu'elle est sensée être, on à retrouvé le lien et on peut modifier la popup

J'y réchéflit.

Le seul point de sécurité que j'y voit c'est que tu ne peux accéder à une fenêtre que si tu en connais le nom.

Maintenant, est-ce que cela marche parce que ma popup d'origine n'avait déjà pas d'URL ?

Je test...

**SpaceFrog** · 15/03/2007, 11h31

heu de mon coté ça ne fonctionne pas ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type='text/javascript'>
function test(){
if (self.location.href.split('\?').length>1){
		window.Mypop=window.open("",'titre');
			setTimeout(function(){alert (Mypop.url)},1000)
	 }
	else{
   		window.Mypop=window.open("",'titre');
   		window.Mypop.location.href="opener.htm"
		 setTimeout(function(){self.location.href=self.location.href+"\?lkjlkj"},1000);
		}
 
}	
 
 
</script>
</head>
 
<body onload='test()'>

**Ricou13** · 15/03/2007, 11h47

Voici le code final.

Ce n'est plus la fonction "CreerPopup" qui crèe la fenêtre mais la sous fonction "PopupExiste" qui vérifie d'abord son existence.

Pour tester en conditions réélles, j'ai créé une page de contenu pour la popup qui s'appelle "mapopup.html" que je lance avec un paramêtre en GET, histoire de dire.

Le contenu de la popup (rien d'intéressant) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>PopUp</title>
  </head>
  <body>
  <p>Ma Popup</p>
  </body>
</html>

Le code de la page mère (beaucoup plus interessant !) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <script type="text/javascript">
  var MaPopup;
 
  function CreerPopup(Nom)
  {
    Entete = "http://" + window.location.host + "/";
    Page = "test/mapopup.html?liste=1,2,3";
    Parametres = "width=300,height=300,location=1";
    MaPopup = PopupExist(Entete, Page, Nom, Parametres);
  }
 
  function TesterPopup()
  {
    if(MaPopup == undefined || MaPopup.name == null)
      alert("La popup n'existe pas !");
    else
      alert("La popup existe et s'appelle : " + MaPopup.name);
  }
 
  function CreerDiv()
  {
    if(MaPopup != undefined && MaPopup.name == "Pop")
    {
      var NewDiv = document.createElement("div");
      NewDiv.appendChild(document.createTextNode("Nouvelle Div"));
      MaPopup.document.getElementsByTagName("body")[0].appendChild(NewDiv);
      MaPopup.focus();
    }
  }
 
  function PopupExist(Entete, Page, Nom, Param)
  {
    var LocalPop = window.open("", Nom, Param);
    if(LocalPop.location.href == "about:blank")
      LocalPop.location = Entete + Page;
    return LocalPop;
  }
  </script>
  </head>
  <body>
 
  <input type="button" value="Creer Popup" onclick="CreerPopup('Pop');" />
  <input type="button" value="Ajouter Div" onclick="CreerDiv();" />
  <input type="button" value="Tester Popup" onclick="TesterPopup();" />
  </body>
</html>

Pour le tester :

1) Modifier, dans "CreerPopup", la variable "Page" pour qu'elle s'adapte à votre arborescence (je suis en localhost, dans un sous dossier "test")

2) Lancer la page mère "popup.html"

3) Cliquez sur "Créer popup"

4) Cliquez sur "TesterPopup" => Pop existe

5) Cliquez plusieurs fois sur "Ajouter Div" => les div sont ajoutées

6) Changer de page mère et revenez dessus ou recharger-la

7) Cliquez sur "TesterPopup" => la fenêtre (du moins le lien) n'existe plus

8) Cliquez sur "Créer popup" => le lien est recréé

9) Cliquez sur "TesterPopup" => Pop existe

10) Cliquez plusieurs fois sur "Ajouter Div" => les div sont ajoutées

**Ricou13** · 15/03/2007, 11h51

Je n'ai pas fait le test qui vérifie que l'url est conforme à ce qu'elle est sensée être mais comme on fournit l'url via les paramètres de la fonction, il suffit de comparer avec celle récupérée dans la popup.

Maintenant que faire s'il existe bien un url dans la popup mais qu'elle n'est pas conforme ???
Cela sous entend qu'il s'agit d'une popup ouverte par un autre site !

Dis-moi, la Grenouille, ca vaut bien une chtite place dans la FAQ, non ?

**SpaceFrog** · 15/03/2007, 12h01

testé sous firefox ça passe pas ...

procédure ...

j'ouvre pa page mère je crée le div ...
je ferme la page mère, je la réouvre ...

je clique sur ajouter div ... rien
je clique sur tester popup ... message "lapopup n'exite pas"

alors que je n'ai pas fermé le popup ...

il faut d'abord cliquer sur créer div ...
il faudrait lance la procédure de creation des l'ouverture non ?

**SpaceFrog** · 15/03/2007, 12h05

maintenant si c'est le fait que lorsque tu recrée une popup avec le même nom il reprenne la même que tu penses avoir découvert ...

j'ai peur de te décevoir ...
un foromeur au eu exactement le problème inverse, lui voulait s'assurer d'ouvrir une nouvelle fenetre

http://www.developpez.net/forums/sho...d.php?t=295065

**Ricou13** · 15/03/2007, 12h27

Envoyé par SpaceFrog

testé sous firefox ça passe pas ...

Chez moi ça passe sous FF 2 et IE 6 (sauf le "Ajouter Div" mais ca doit être un pb de codage) en rechargeant la page, en fermant l'onglet et en fermant le navigateur.

Envoyé par SpaceFrog

procédure ...

j'ouvre pa page mère je crée le div ...

il faut d'abord créer la popup (bouton "Créer Popup" => Point No 3 de la procédure)

Envoyé par SpaceFrog

je ferme la page mère, je la réouvre ...

je clique sur ajouter div ... rien

il faut aussi d'abord créer la popup (bouton "Créer Popup" => Point No 8 de la procédure)

Envoyé par SpaceFrog

je clique sur tester popup ... message "lapopup n'exite pas"

normal puisque tu n'as pas recréé le lien

Envoyé par SpaceFrog

il faudrait lance la procédure de creation des l'ouverture non ?

Pas forcément puisque on a besoin de la popup que si on veut y ajouter quelque chose.

Mes fonctions sont actuellement bien séparée pour que le principe soit simple. dans la réalité, c'est, bien sur, lorsque l'on clique sur le bouton "Ajouter Div" qu'il faut tester l'existence de la popup.

Ok je le refait en supprimant le bouton "Créer Popup"...

**Ricou13** · 15/03/2007, 12h43

Voilà la version plus compacte qui fonctionne (presque - voir à la fin) sous FF 2 et IE 6. La gestion de la popup se fait sur le bouton "Ajouter Div".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <script type="text/javascript">
  var MaPopup;
 
  function TesterPopup()
  {
    if(MaPopup == undefined || MaPopup.name == null)
      alert("La popup n'existe pas !");
    else
      alert("La popup existe et s'appelle : " + MaPopup.name);
  }
 
  function CreerDiv(Nom)
  {
    if(MaPopup == undefined || MaPopup.name != Nom)
      MaPopup = FollowPopup(Nom);
 
    var NewDiv = document.createElement("div");
    NewDiv.appendChild(document.createTextNode("Nouvelle Div"));
    popupBody = MaPopup.document.getElementsByTagName("body")[0];
    popupBody.appendChild(NewDiv);
    MaPopup.focus();
  }
 
  function FollowPopup(Nom)
  {
    Entete = "http://" + window.location.host + "/";
    Page = "test/mapopup.html?liste=1,2,3";
    Parametres = "width=300,height=300,location=1";
 
    var LocalPop = window.open("", Nom, Parametres);
    if(LocalPop.location.href == "about:blank")
      LocalPop.location = Entete + Page;
    return LocalPop;
  }
  </script>
  </head>
  <body>
 
  <input type="button" value="Ajouter Div" onclick="CreerDiv('Pop');" />
  <input type="button" value="Tester Popup" onclick="TesterPopup();" />
  </body>
</html>

Par contre, j'ai 2 erreurs :
- Lors de la création de la popup, le premier div n'est pas inséré. Certainement parce que la page de la popup n'est pas encore entièrement chargée => Il faut donc effectivement envisager la récupération du lien au chargement de la page mère

- sous IE, lors du

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
popupBody = MaPopup.document.getElementsByTagName("body")[0];
popupBody.appendChild(NewDiv);

J'ai l'erreur "Cette interface n'est pas prise en charge". Est-ce une erreur de syntaxe ?

**SpaceFrog** · 15/03/2007, 12h52

pour le premier div ... mets un setInterval pour laisser le temps au popup de s'instancier ...

pour l'erreur... je ne vois pas trop ...
sais tu si c'est sur la première ou la seconde ligne ?

**Ricou13** · 15/03/2007, 14h26

C'est sur le appendChild.

IE me gonfle de plus en plus

Maintenant, si je ferme la popup et que je teste son existence, j'ai une erreur "Accès refusé" sur MaPopup.name

**Ricou13** · 15/03/2007, 16h43

Bon, comme à mon niveau, je ne manipulais en fait, que la liste des arguments de l'url et que la page de la popup était ensuite rechargée, cette solution me convient et fonctionne autant sur FF que sur IE

Quant au test, j'ai supprimé le test d'existence de la popup, dans la fonction "CreerDiv" puisqu'il est inutile (Dans FollowPopup, si la fenetre existe elle est renvoyée sinon elle est crée).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  function CreerDiv(Nom)
  {
    MaPopup = FollowPopup(Nom);
 
    var NewDiv = document.createElement("div");
    NewDiv.appendChild(document.createTextNode("Nouvelle Div"));
    popupBody = MaPopup.document.getElementsByTagName("body")[0];
    popupBody.appendChild(NewDiv);
    MaPopup.focus();
  }

Mais j'ai toujours, du moins sur ce fichier de test, le pb de IE qui ne veut pas gérer le appendChild. J'ai essayé en créant, dans la page "mapopup.html", une div globale

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  <body>
  <div id="MainDiv" style="border: 1px solid red;">
    <p>Ma Popup 2</p>
  </div>
  </body>

et en utilisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    popupDiv = MaPopup.document.getElementById("MainDiv");
    alert(popupDiv.id);
    popupDiv.appendChild(NewDiv);

A part la première fois, l'alerte contient bien l'id (l'élément est donc bien récupéré) mais il y a toujours plantage sur le appendChild.

Donc, pour ma part, mon pb est résolu mais la solution n'est pas complète :

- il faudrait s'assurer du chargement de la page si elle n'existait pas avant d'inserer la div

- et qu'il reste une faille de fonctionnement sous IE.

Par contre, si le but est, comme moi, de simplement modifier l'url de la popup avant de la recharger, ça fonctionne très bien tel quel.

Bye