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

Version imprimable

04/02/2014, 18h41
markham

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

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

je pensais bêtement faire :
Code:

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:

1 2 child.document.getElementById("image").src="new_image.png";
à chaque fois que je voulais changer

mais ça ne fonctionne pas du tout
04/02/2014, 23h44
Auteur

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:

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

est appelé dans la fenêtre parent.
05/02/2014, 20h53
markham

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
05/02/2014, 21h55
Auteur

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

mere.html :

//partie javascript posant probleme

Code:

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:

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 >

06/02/2014, 10h27
SpaceFrog

Les popups sont totalement has been => passe par un popin la manipulation du contenu en sera facilitée
06/02/2014, 18h10
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.
06/02/2014, 19h08
Auteur
Citation:

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:

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.
07/02/2014, 08h29
SpaceFrog

Citation:

plus pratique à gerer

un brin masochiste ? :mouarf:
07/02/2014, 09h31
markham
Citation:

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

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 ?
07/02/2014, 09h32
SpaceFrog

setTimeout() ou une boucle avec un test si l'element existe ...
07/02/2014, 09h35
Bovino

Code:

child.onload

sera plus efficace. ;)

Pb resolu avec le code suivant,

javascript chez la mere :

Code:

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:

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

merci à tous pour votre aide