Fermer plusieurs popups avec un seul bouton

Version imprimable

Voir 40 message(s) de cette discussion en une page

24/11/2008, 10h48
Jarodd

Non toujours pas :(

Vu que j'ai réussi à fermer les deux premières, j'ai voulu vérifier s'il la dernière était toujours ouverte. Seulement le code de la FAQ ne fonctionne pas chez moi, c'est dommage parce que ça simplifierait les choses !
24/11/2008, 10h53
Jarodd

Concernant ce qui marche à moitié (#19), est-ce qu'il existe des variables superglobales comme en PHP ? Actuellement la mère ne sait pas que la fille a créé une petite fille, si elle pouvait le savoir je pourrais tester si la fille est toujours ouverte et si ce n'est pas le cas, fermer la petite-fille ?

là mère:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <html>
<head>
	<script language="JavaScript" type="text/javascript">
		tabPopups = new Array();
		function CloseAllPopups() {
			var i = tabPopups.length-1;
			while( tabPopups[i] ) {
				tabPopups.pop().close();
				i--;
			}
		}
	</script>
</head>
<body>
...
<input type="button" name="PU" id="PU" value="Search" onClick="tabPopups.push(window.open('fille.htm') )";>
...
<input type='button' value='Close All' onClick=' CloseAllPopups();' />
</body>
</html>

la fille:

Code:

1
2
3
4
5
6
7
8
9
10
11
 <html>
<head>
 
</head>
<body>
...
<input type="button" name="PU" id="PU" value="Search" onClick="self.opener.tabPopups.push(window.open('about:blank') )";>
...
<input type='button' value='Close All' onClick='self.opener.CloseAllPopups();' />
</body>
</html>

24/11/2008, 11h14
Jarodd

Y'a de l'idée ! Seulement il y a une fonctionnalité que je n'avais pas précisé, je ne pensais pas que ça influerait... La petite-fille génère un tableau qui renvoie des infos sur la mère.

Or là on a un comportement du CloseAll différent selon où on en est :
- on n'a pas encore renvoyé des infos : le bouton ferme fille et petite-fille (sans fermer la mère)
- on a renvoyé des infos : le bouton ne réagit plus

Et là en tapant cela je me rend compte que le code est quand même assez bancal et que ça risque d'être impossible à adapter...

il faudrait aussi gerer la fermeture des pops intermediaires
Code:

1 2 3 4 5 6 7 8 9 10 11 12 tabPopups = new Array(); function CloseAllPopups() { i=0; while(tabPopup[i]){ if(tabPopups[tabPopup.length-1].parent) { tabPopups.pop().close();} else {tabPopups.pop()} } }
si la popup existe on la ferme et on la supprime de l'array
sinon on la supprime simpelement de l'array
ou un truc du genre
peut être juste un test sur lexistance???
ou alors c'est le while qui bloque il faudrait fiare une boucle for de sorte qu'elle ne s'interrompe pas si le popup n'existe plus ...

24/11/2008, 11h31
Jarodd

Non décidément ça veut pas...

Bon je te remercie pour ton aide SpaceFrog, tu m'as bien aidé ;) Je vais laisser de côté cette fonctionnalité et j'y reviendrai peut-être plus tard mais là j'y ai passé trop de temps, je préfère avancer sur le reste, qui n'est pas aisé non plus ;)

Je laisse le topic en l'état au cas où, s'il y a d'autres réponses je retesterai plus tard.

essaye ceci:

fille:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <script type='text/javascript'> var mother=self; while(mother.opener){mother=mother.opener}; </script> </head> <body> ... <input type="button" name="PU" id="PU" value="Search" onclick="mother.tabPopups.push(window.open('fille.htm') )" > ... <input type='button' value='Close All' onClick='mother.CloseAllPopups();' /> </body> </html>
j'ai ouvert plein de fenetre et fermé au hasard dans la file
le click sur n'importe que bouton de fermeture les ferme toutes !

24/11/2008, 13h56
Jarodd

Toujours pas. En plus le bouton doit être sur la mère, pas le droit de la mettre sur la fille.

M'enfin ton code est probablement correct, c'est le mien qui doit être trop foireux pour fonctionner. A part reprendre à zéro je crois que je n'ai pas beaucoup d'autres solutions...
24/11/2008, 13h59
SpaceFrog

j'ai testé en long en large et en travers mon code ... sous IE et FFX ...
que le bouton soit sur la mère ou la fille peu importe, la fonction appelées est elle bien sur la mère ....
Tu dois juste avoir un souci d'implémentation de ce code dans le tien

bonjour,

gère l'ouverture de tes pop-up dans la fenêtre mère. Ainsi si par exemple la pop-up B est fermée avant la C, tu ne perds pas les liens de parentés :

Fenêtre principale : (j'ouvre la popup 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
54
55
56
57
58
59
60
61
62
63
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
 
<script type="text/javascript">
<!--  
var fen = new Array(); // tableau de popups
var statutFen = new Array(); // contient le statut des popups : false=>fermee ;  true=>ouverte

var n = 0; // compteur

function ouvrirPopup(url, titre)
{
  fen[n] = window.open(url, titre, "");
}

function popupOuverte()
{
  statutFen[n] = "true";
  n++;
  return n-1;
}

function popupFermee(index)
{
  statutFen[index] = "false";
}

function toutFermer()
{
  var j;
  for (j=0; j<n; j++)
  {
    alert("fenêtre : " + j + "\nStatut : " + statutFen[j]);
    if (statutFen[j]=="true")
      fen[j].close();
  }
}
//-->
</script> 
 
 
</head>
 
<body>

<div>
  <h4>Page principale</h4>
  <span style="cursor:pointer; color:#0000FF" onclick="ouvrirPopup('A.htm','PageA')">Ouvrir pop-up A</span>
  <br/><br/><br/>
  <input type="button" value="Tout fermer" onclick="toutFermer()" />
</div>

</body>

</html>

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
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
  
<script type="text/javascript">
<!--  
var index = -1;

function ouvrirPopup(url, titre)
{
  window.opener.ouvrirPopup(url, titre, ""); 
}

function popupOuverte()
{
  index = window.opener.popupOuverte();
  document.getElementById("idIndex").innerHTML = "index de la popup : " + index;
}

function popupFermee()
{
  window.opener.popupFermee(index);
}
//-->
</script> 
 
</head>
 
<body onload="popupOuverte()" onunload="popupFermee()">

<div>
  <h4>Popup A</h4>

  <div id="idIndex"></div>
  <br /><br />

  <span style="cursor:pointer; color:#0000FF" onclick="ouvrirPopup('B.htm','PageB')">Ouvrir pop-up B</span>
</div>

</body>

</html>

B.htm (idem que A.htm sauf le lien vers la popup, cf. code HTML) :

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
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />
  
<script type="text/javascript">
<!--  
var index = -1;

function ouvrirPopup(url, titre)
{
  window.opener.ouvrirPopup(url, titre, "");
}

function popupOuverte()
{
  index = window.opener.popupOuverte();
  document.getElementById("idIndex").innerHTML = "index de la popup : " + index;
}

function popupFermee()
{
  window.opener.popupFermee(index);
}
//-->
</script>  
 
</head>
 
<body onload="popupOuverte()" onunload="popupFermee()">

<div>
  <h4>Popup B</h4>

  <div id="idIndex"></div>
  <br /><br />

  <span style="cursor:pointer; color:#0000FF" onclick="ouvrirPopup('C.htm','PageC')">Ouvrir pop-up C</span>
</div>

</body>

</html>

C.htm (idem que A sauf que j'ai enlevé la fonction ouvrirPopup() car C n'ouvre pas de popup) :

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
<!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="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Author" content="Auteur - www.developpez.com" />



<script type="text/javascript">
<!-- 
var index = -1;

function popupOuverte()
{
  index = window.opener.popupOuverte();
  document.getElementById("idIndex").innerHTML = "index de la popup : " + index;
}

function popupFermee()
{
  window.opener.popupFermee(index);
}
//-->
</script>  
 
</head>
 
<body onload="popupOuverte()" onunload="popupFermee()">

<div>
  <h4>Popup C</h4>
  <div id="idIndex"></div>
</div>

</body>

</html>

page principale :

J'ouvre chaque popup grâce à la fonction ouvrirPopup().
A chaque popup je lui affecte un index retourné par la fonction popupOuverte() qui est appelée lors de l'événement onload de la popup (le statut de la fenêtre passe à true et j'incrémente n le nombre de popups).
La fonction popupFermee() est appelée lors de chaque événement onunload déclenché par la fermeture d'une popup (et le statut de la fenêtre passe à false).

La fonction toutFermer() compte fait une boucle jusqu'à n, si le statut de la popup est à true on la ferme :)

Les popups :

Elles appellent les fonctions de la fenêtre principale. Par conséquent chaque popup est l'enfant de la fenêtre principale : la popup B n'est pas l'enfant de A, de même C n'est pas l'enfant de B ;)

C'est le même principe que dans cette source : naviguer dans une pop-up sans perdre l'opener

24/11/2008, 16h46
SpaceFrog

oulà Auteur ??? super compliqué ...
As tu testé mon code ??

j'ouvre en cascade les popups fille petite fille, mais je stocke tout dans un array de la première mère ...
et la fonction de fermeture est egalement sur la mère initiale

le fait de perdre en route un lien n'a pas l'aire de le deranger ... toutes les popups se ferment
24/11/2008, 17h13
Auteur

euh, non j'avoue, je n'ai pas regardé ce qui a été proposé précédemment :oops: :oops:

Dans le code que j'ai posté tout est géré à partir de la fenêtre mère. Mais en plus je vérifie que la popup est bel et bien ouverte. Je n'ai pas l'impression que c'est compliqué : le code JS de chaque popup est identique.

Par contre, il est vrai que j'aurai pu choisir d'autres noms pour les fonctions de la page principale : elles portent les mêmes noms que les fonctions des popups mais ne réalisent pas les mêmes opérations :aie: (cf. les fonctions popupOuverte() et popupFermee())
24/11/2008, 17h17
SpaceFrog

ma technique consiste à coller toutes les fenetres ouvertes dasn un array de la page mère ...
pour tout fermer on scanne l'array pour fermer toutes les popups
un script en debut de chaque popup remonter l'arbre de parenté pour determiner la mère de toutes les popups ...
26/11/2008, 15h29
Jarodd
Bonjour,

Je m'obstine :) Vu que je ne peux pas appliquer vos codes, je m'en inspire pour me faire le mien mais pas trop pour ne pas m'embouiller :lol:

En reprenant de 0, j'ai réussi avec la méthode push() à enregistrer le nombre de popups ouvertes. Après les avoir ouvertes, je clique sur [Close] et j'affiche "2", soit le bon tabPopups.length.

J'ai donc ceci :

Fille :

Code:

window.opener.tabPopups.push("listesPU");

Petite fille :P

Code:

window.opener.window.opener.tabPopups.push("listesPU");

Mère :
Code:

1 2 3 4 5 6 7 8 9 10 11 tabPopups = new Array(); function CloseAllPopups() { var nb = tabPopups.length; alert("Taille du tableau : " + nb); while ( nb != 0) { tabPopups[nb].close(); nb--; } }
Cela ne fonctionne pas (j'ai le bon nombre mais rien ne se ferme). J'ai aussi essayé en mettant en dur le nom de chaque popup :
Code:

1 2 3 4 5 6 7 ... while ( nb != 0) { listesPU.close(); listesPV.close(); } ...
C'est pareil.

Je sens que je ne suis pas loin du but, mais j'accroche sur ce point. Et je n'arrive pas à adapter vos précédents codes...
26/11/2008, 16h13
Auteur

Tu as une page en ligne pour voir comment tu a implémenté le code ? Car là j'ai l'impression que l'on ne va pas s'en sortir :?
26/11/2008, 16h15
SpaceFrog

Code:

window.opener.opener.tabPopups.push("listesPU");

et pourquoi ne pourrais tu implementer mon code ???
26/11/2008, 16h26
Jarodd

Auteur : c'est un intranet, je n'ai rien sous la main pour le publier...

SpaceFrog : la ligne que tu mets, je l'ai et telle fonctionne (le tableau est rempli). Ce que je n'arrive pas à faire, c'est parcourir le tableau pour fermer les popups. Pour votre code je voudrais bien l'utiliser, mais il ne fonctionne pas ici et je ne sais pas pourquoi. Donc je suis bien obligé de l'adapter si je veux y arriver :?
26/11/2008, 16h30
Auteur

Jarodd : tu as essayé l'exemple que j'ai posté ?
26/11/2008, 16h36
Jarodd
Oui je l'ai essayé tel quel, sans rien changer, et ça marche. Quand j'essaye de l'adapter sur le projet, avec tout le reste du code autour, les autres fonctions, etc, ça ne marche plus. Et je ne sais pas à quel endroit ça bloque, c'est pour ça que j'essaye davancer petit à petit en testant à chaque ajout plutôt que coller vos fonctions pour ensuite débuguer...

Edit : je viens de réussir à afficher le nom des popups :
Code:

1 2 3 4 5 while ( nb != 0) { alert("Position n°" + nb + " : " + tabPopups[nb-1]); nb--; }
SpaceFrog ça c'est ton code légèrement retouché ! ;)

parcourrir le tableau :

Code:

1
2
3
4
5
6
7
8
9
function CloseAllPopups() {
                        i=0;
			while(tabPopup[i]){ // ici je parcourre l'array
                            if(tabPopups[tabPopup.length-1].parent) {
				tabPopups.pop().close();}
 
                             else {tabPopups.pop()}                              
 
			}

Voir 40 message(s) de cette discussion en une page