Changer l'image contenue dans une popup depuis la page mère

**markham** · 04/02/2014, 18h41

Bonjour,

je souhaiterai changer l'image contenue dans une popup depuis la page mère,

je pensais bêtement faire :

Code :

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

1
2
 
child=self.window.open('child.html',"zoom","menubar=no, status=no, scrollbars=no, menubar=no, width=640, height=480");

et dans le programme faire appel à :

Code :

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

1
2
 
child.document.getElementById("image").src="new_image.png";

à chaque fois que je voulais changer

mais ça ne fonctionne pas du tout

**Auteur** · 04/02/2014, 23h44

bonsoir,

est-ce que child.html contient bien une balise img avec un attribut id="image" ?
Ensuite dans self.window.open le self n'est pas nécessaire. Et on est bien d'accord que ce code

Code :

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

child.document.getElementById("image").src="new_image.png";

est appelé dans la fenêtre parent.

**markham** · 05/02/2014, 20h53

Bonjour,

oui, child.html contient bien une balise img avec un attribut id="image".

par contre je dois avoir un soucis de callback car l'objet child.document.getElementById("image") semble vide d'apres la console de debug.

je ne sais pas comment resoudre cela

**Auteur** · 05/02/2014, 21h55

Peux-tu poster le code HTML de tes 2 pages ?

**markham** · 06/02/2014, 09h58

mere.html :

//partie javascript posant probleme

Code :

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

1
2
3
4
$('#image').click( function() {
 child=self.window.open('child.html',"image","menubar=no, status=no, scrollbars=no, menubar=no, width=640, height=480");
child.document.getElementById("image").src="new_image.png";
});

child.html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<html>
 
  <head>
		<link rel="stylesheet" href="default.css" type="text/css" media="all" />
</head>
<body >
<div class='imgresize'>
<img  id="image" src="" "alt="image" class="imgtag" />
</div>
</body >
</html >

**SpaceFrog** · 06/02/2014, 10h27

Les popups sont totalement has been => passe par un popin la manipulation du contenu en sera facilitée

**markham** · 06/02/2014, 18h10

merci pour le conseil,

mais je reste avec ma popup, plus pratique à gerer grace a son independance vis a vis de la fenêtre mere.

**Auteur** · 06/02/2014, 19h08

Envoyé par markham

merci pour le conseil,

mais je reste avec ma popup, plus pratique à gerer grace a son independance vis a vis de la fenêtre mere.

mais la grande majorité des navigateurs bloquent les pop-ups. Je pense que l'idée de SpaceFrog est bien meilleure.

Sinon pour ton code :

Code :

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

1
2
3
 child=self.window.open('child.html',"image","menubar=no, status=no, scrollbars=no, menubar=no, width=640, height=480");
child.document.getElementById("image").src="new_image.png";
});

tu fais un open() puis immédiatement un getElementById() or la page child.html n'est pas chargée. Donc l'élément image n'existe pas encore. Après l'instruction open() tu dois attendre que child.hml soit chargée avant de remplacer l'image.

**SpaceFrog** · 07/02/2014, 08h29

plus pratique à gerer

un brin masochiste ?

**markham** · 07/02/2014, 09h31

mais la grande majorité des navigateurs bloquent les pop-ups. Je pense que l'idée de SpaceFrog est bien meilleure.

dans un cas general oui, mais dans mon cas j'ai absolument besoin que la fenêtre fille soit dans une fenêtre diffèrente de celle de la mere.

Envoyé par Auteur

mais la grande majorité des navigateurs bloquent les pop-ups. Je pense que l'idée de SpaceFrog est bien meilleure.

Sinon pour ton code :

Code :

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

1
2
3
 child=self.window.open('child.html',"image","menubar=no, status=no, scrollbars=no, menubar=no, width=640, height=480");
child.document.getElementById("image").src="new_image.png";
});

tu fais un open() puis immédiatement un getElementById() or la page child.html n'est pas chargée. Donc l'élément image n'existe pas encore. Après l'instruction open() tu dois attendre que child.hml soit chargée avant de remplacer l'image.

comment fait ton cela ?

**SpaceFrog** · 07/02/2014, 09h32

setTimeout() ou une boucle avec un test si l'element existe ...

**Bovino** · 07/02/2014, 09h35

Code :

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

child.onload

sera plus efficace.

**markham** · 13/02/2014, 19h45

Pb resolu avec le code suivant,

javascript chez la mere :

Code :

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

1
2
3
4
5
6
function openpopup(){
  child=window.open('child.html',"image","menubar=no, status=no, scrollbars=no, menubar=no, width=640, height=480");
  child.onload=function(e){ 
    child.changeimg("mon_image.jpg");
  }
}

dans la popup :

Code :

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

1
2
3
4
function changeimg(img){
 image = document.getElementById("image");
 image.src = img;
}

merci à tous pour votre aide

Changer l'image contenue dans une popup depuis la page mère

JavaScript

Discussions similaires

Partager

Partager