[DOM] Pop up

**Soulame** · 25/05/2007, 16h54

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 :

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

**E.Bzz** · 25/05/2007, 18h06

Bonjour,

Code :

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

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+

**Soulame** · 28/05/2007, 09h53

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 :

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

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.

**Auteur** · 28/05/2007, 15h30

bonjour,

et en déclarant ta variable fenetre dans chacune de tes fonctions ?

**Soulame** · 28/05/2007, 16h55

Non, ca ne change rien, merci quand même.

**Auteur** · 28/05/2007, 19h07

Il faut attendre que ta page soit chargée avant d'accèder aux éléments de ton pop-up !!

En effet :

Code :

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

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 :

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

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

**Auteur** · 28/05/2007, 19h30

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

fenetre parent :

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

**Soulame** · 29/05/2007, 10h37

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 :

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

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

**Soulame** · 29/05/2007, 16h33

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?

**Auteur** · 29/05/2007, 17h41

regarde le code j'ai fait dans le message #7 : il fonctionne très bien sous IE et Firefox.

**Soulame** · 30/05/2007, 10h05

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

**mathieugamin** · 30/05/2007, 11h07

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 !

**Soulame** · 30/05/2007, 13h16

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

[DOM] Pop up

JavaScript

Discussions similaires

Partager

Partager