[DOM] Pop up

Version imprimable

[DOM] Pop up

Bonjour,

J'ai un petit problème de gestion de pop up :

Je crée une pop up avec fenetre = window.open(...), j'ai accès au sous objet document de fenetre, mais pas aux méthodes de celui-ci, tel que getElementById(..) qui me renvoie null alors que l'id existe (vérifié par Dom Inspector).

Voila le code javascript pour plus de détail :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function OuvrirPopup(page,nom,largeur,hauteur,options){ // on cherche à positionner la pop-up au centre de l'écran. var top=(screen.height-hauteur)/2; var left=(screen.width-largeur)/2; //on ouvre la pop-up avec les options choisies. fenetre = window.open(page,nom,"top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options); return fenetre; } function Imprimer(page,nom){ fenetre = OuvrirPopup(page,nom,document.getElementById("Corps").offsetWidth,document.getElementById("Corps").offsetHeight,"menubar=no, scrollbars=no, statusbar=no, resizable=no"); // alert(fenetre.document);//.getElementById("Corps").innerHTML="erf"; fenetre.print(); fenetre.close(); // fenetre.document.getElementById("Corps").style.marginLeft = "Opx"; }
Merci d'avance pour votre aide.

25/05/2007, 18h06
E.Bzz

Bonjour,

Code:

fenetre.document.getElementById("Corps").style.marginLeft = "Opx";

Si tu mets un 0 (zéro) au lieu de la lettre "O", ça devrait marcher mieux ;)

Sinon la syntaxe est bonne, y compris pour les méthodes ...

A+

Merci, mais le problème ne viens pas de la en fait, même en remplaçant le fameu "O" par un 0 (mode boulet ^^).
Code:

1 2 3 4 5 6 function Imprimer(page,nom){ fenetre = OuvrirPopup(page,nom,document.getElementById("Corps").offsetWidth,document.getElementById("Corps").offsetHeight,"menubar=no, scrollbars=no, statusbar=no, resizable=no"); fenetre.document.getElementById("Corps").style.marginLeft = "0px"; fenetre.print(); fenetre.close(); }
En fait la ligne fenetre.document.getElement... le fait bloquer (erreur classique quand problème avec le javascript) : il continue donc pas pour executer fenetre.print() et fenetre.close() (qui fonctionnent si je retire la ligne problèmatique).

Je ne comprend vraiment pas ce qui ne va pas.

28/05/2007, 15h30
Auteur

bonjour,

et en déclarant ta variable fenetre dans chacune de tes fonctions ?
28/05/2007, 16h55
Soulame

Non, ca ne change rien, merci quand même.
28/05/2007, 19h07
Auteur
:idea: Il faut attendre que ta page soit chargée avant d'accèder aux éléments de ton pop-up !!

En effet :
Code:

1 2 fenetre = window.open("page.htm","","");
renvoit bien un objet fenêtre... Mais, ta page met un certain temps à ce charger, ce n'est pas instantanné. Donc si tu fais dans une même fonction :
Code:

1 2 3 4 var fenetre, elmt; fenetre = window.open("page.htm","",""); elmt = fenetre.document.getElementById("idElement");
La fenêtre s'ouvre et ta variable fenêtre contient un objet window. Mais rien ne dit que les éléments contenus dans cette page soient tous chargés lors de l'appel de getElementById() ;)

Regarde la pièce jointe du script 1 de cette discussion
J'ouvre la fenêtre fille, puis lorsque la fenêtre fille est chargée (événement onload) je mets une variable de la fenêtre mère à true (cf. fonction charge() du fichier varFilleMere.htm). Et dans ce cas, je peux transférer des infos de la fenêtre mère vers la fenêtre fille...

Dans ton cas, intègre la fonction d'impression dans la pop-up :

fenetre parent :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
var fenetre = null;
 
function OuvrirPopup(page,nom,largeur,hauteur,options)
{
  // on cherche à positionner la pop-up au centre de l'écran.
  var top=(screen.height-hauteur)/2;
  var left=(screen.width-largeur)/2;
 
  //on ouvre la pop-up avec les options choisies.
  fenetre = window.open(page,nom,"top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}
 
 
function Imprimer(page,nom)
{
 var corps = document.getElementById("corps");
 OuvrirPopup(page,nom,corps.offsetWidth,corps.offsetHeight,"menubar=no, scrollbars=no, statusbar=no, resizable=no");
}
 
//-->
</script>
 
</head>
 
<body>
 
<div id="corps" style="width: 100px; height: 100px">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
 
<input type="button" value="Bouton" id="idButton" onclick="Imprimer('test.htm', 'test')" />
 
</body>
 
</html>

test.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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function imprime()
{
   document.getElementById("corps").innerHTML = window.opener.document.getElementById("corps").innerHTML;
   print();
   close();
}
 
//-->
</script>
 
</head>
 
<body onload="imprime()">
 
<div id="corps">
</div>
 
</body>
 
</html>

Ca marche merci beaucoup, il fallait donc attendre le chargement de la page en effet.
Pour ceux que ca interesse voici la fonction à la fin.

Code:

1
2
3
4
5
6
7
8
9
10
11
//fonction pour lancer l'impression d'une page.
function Imprimer(page,nom){
	fenetre = OuvrirPopup(page,nom,document.getElementById("Corps").offsetWidth,document.getElementById("Corps").offsetHeight,"menubar=no, scrollbars=no, statusbar=no, resizable=no");
	//quand la page est chargée on va modifier margin-left du Corps.
	fenetre.onload = 
	function(){
		fenetre.document.getElementById("Corps").style.marginLeft = "0px";
		//on attend 500 ms que la page se charge pour voir l'affichage avant de lancer l'impression.
		setTimeout("fenetre.print(); fenetre.close();",500);
	}
}

29/05/2007, 16h33
Soulame

Hmm zut, je croyais le problème éridaqué, mais un internet explorer resiste encore et toujours à l'éradication des bugs :p.

Donc mon problème à nouveau c'est le même qu'auparavant, mais seulement sous internet explorer, c'est à dire qu'il ne me trouve pas l'element demandé (fenetre.document.getElementById("Corps")).

Quelqu'un aurait-il une solution svp?
29/05/2007, 17h41
Auteur

regarde le code j'ai fait dans le message #7 : il fonctionne très bien sous IE et Firefox.
30/05/2007, 10h05
Soulame

Oui, je vois que ta méthode marcherai sans problème avec ie, mais l'inconvénient c'est qu'il me faudrai recréer une page en fait, tandis que moi je me contente de rappeler la même dans une popup, mais sans inclure les en-tete, menu et pied-de-page.

Donc cela me ramene au même css que je souhaite modifier par javascript (ce qui marche bien sous firefox).
30/05/2007, 11h07
mathieugamin

Salut,
Pour IE j'ai eu le problème des variables top et left.
Le script fonctionne très bien sous FF, mais sous IE cela bloque.

Si tu renommes tes variables top et left en haut et gauche, tu ne devrais plus avroi de soucis avec IE...;)

Bon courage !
30/05/2007, 13h16
Soulame

Merci Mathieu, mais j'ai essayé et ca ne viens pas de la :p.