Fermer plusieurs popups avec un seul bouton

**Jarodd** · 24/11/2008, 11h48

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 !

**Jarodd** · 24/11/2008, 11h53

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 ?

**SpaceFrog** · 24/11/2008, 12h01

là mère:

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

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

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>

**Jarodd** · 24/11/2008, 12h14

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

**SpaceFrog** · 24/11/2008, 12h22

il faudrait aussi gerer la fermeture des pops intermediaires

Code :

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

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

**Jarodd** · 24/11/2008, 12h31

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.

**SpaceFrog** · 24/11/2008, 13h10

essaye ceci:

fille:

Code :

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

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 !

**Jarodd** · 24/11/2008, 14h56

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

**SpaceFrog** · 24/11/2008, 14h59

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

**Auteur** · 24/11/2008, 17h33

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

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

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
<!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 x :

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
<!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 x :

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

**SpaceFrog** · 24/11/2008, 17h46

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

**Auteur** · 24/11/2008, 18h13

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

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

(cf. les fonctions popupOuverte() et popupFermee())

**SpaceFrog** · 24/11/2008, 18h17

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

**Jarodd** · 26/11/2008, 16h29

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

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 :

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

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

Petite fille

Code :

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

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

Mère :

Code :

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

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 :

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

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

**Auteur** · 26/11/2008, 17h13

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

**SpaceFrog** · 26/11/2008, 17h15

Code :

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

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

et pourquoi ne pourrais tu implementer mon code ???

**Jarodd** · 26/11/2008, 17h26

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

**Auteur** · 26/11/2008, 17h30

Jarodd : tu as essayé l'exemple que j'ai posté ?

**Jarodd** · 26/11/2008, 17h36

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 :

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

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é !

**SpaceFrog** · 26/11/2008, 17h50

parcourrir le tableau :

Code :

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

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

Fermer plusieurs popups avec un seul bouton

JavaScript

Discussions similaires

Partager

Partager