Maintenir la relation avec une popup, sur plusieurs pages

Version imprimable

14/03/2007, 22h59
Ricou13

Maintenir la relation avec une popup, sur plusieurs pages

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:

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

Merci pour vos lumières
15/03/2007, 09h11
SpaceFrog

pour passer une variable :

Code:

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

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

Code:

MaPopup.variableglobale=parametre

et depuis la popup en retour...

Code:

self.opener.obj.value=variableretour

par exemple ...

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

Salut,

Merci pour tes réponses mais tout ça, je sais faire.
Voici un exemple concret :
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 <!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:

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.

15/03/2007, 10h33
SpaceFrog

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:

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:

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 ...
15/03/2007, 10h39
Ricou13

Citation:

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

Citation:

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...
15/03/2007, 10h43
SpaceFrog

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 ...
15/03/2007, 10h45
Ricou13

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...
15/03/2007, 11h06
SpaceFrog

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 (:roll: :oops: :P ) ou un input et le passer en paramètre ou valider un form puis rouvrir une popup et lui coller le innerHTML
15/03/2007, 11h17
Ricou13

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 !

:yaisse2:

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

Citation:

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

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

Code:

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

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:

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:

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 :

Citation:

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

:yaisse:

15/03/2007, 11h51
Ricou13

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 ?
:mouarf:
15/03/2007, 12h01
SpaceFrog

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 ?
15/03/2007, 12h05
SpaceFrog

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
15/03/2007, 12h27
Ricou13

Citation:

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.

Citation:

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)

Citation:

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)

Citation:

Envoyé par SpaceFrog

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

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

Citation:

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

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:

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:

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 ?

15/03/2007, 12h52
SpaceFrog

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 ?
15/03/2007, 14h26
Ricou13

C'est sur le appendChild.

IE me gonfle de plus en plus :furieux:

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

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:

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:

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:

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

15/03/2007, 16h45
Ricou13

Je sais d'où vient le plantage : le "document" utilisé pour créer le nouveau div est celui de la page mère et non de la popup !!!

:yaisse2:

Voila le code qui fonctionne quasiment parfaitement
pour le contenu de la popup

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
  <div id="MainDiv" style="border: 1px solid red;">
    <p>Ma Popup 2</p>
  </div>
  </body>
</html>

Pour la page mère

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
<!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)
      alert("La popup n'existe pas !");
    else if(MaPopup.name)
    {
      if(MaPopup.name == null)
        alert("La popup n'existe pas !");
      else
        alert("La popup existe et s'appelle : " + MaPopup.name);
    }
    else
      alert("La popup n'existe pas !");
  }
  
  function CreerDiv(Nom)
  {
    MaPopup = FollowPopup(Nom);
      
    var NewDiv = MaPopup.document.createElement("div");
    NewDiv.appendChild(MaPopup.document.createTextNode("Nouvelle Div"));
    popupDiv = MaPopup.document.getElementById("MainDiv");
    
    popupDiv.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>

Sous IE, ça marche maintenant parfaitement. Même la toute première div est créée.

et, pour une fois, c'est FF que je vais critiquer car la première div n'est pas créée (il faudrait ajouter une pause mais la pause "inline" en JS n'est pas chose facile) et le focus ne fonctionne pas.

Comme quoi, avant d'allumer le Billou, faudrait quelques fois vérifier que l'on a codé proprement :roll:

15/03/2007, 17h00
Ricou13

Vous z'auriez pas une p'tite solution pour le focus de la page qui ne change pas sous FF ?
15/03/2007, 17h30
SpaceFrog

colle le focus sur un element de la page ?
15/03/2007, 17h47
Ricou13

Ca marche pas.
15/03/2007, 17h52
Ricou13

Mea culpa, mea maxima culpa.

C'est dans les options avancées javascript de Firefox que l'on peut désactiver la mise en avant des pages.
J'avais du l'activer au début de FF pour éviter l'appraition intempestive de popup.

J'ai été pris à mon propre jeu :P