Creer page html simple dyamique

**sorry60** · 04/07/2007, 15h25

Bonjour,

Je souhaite creer et faire apparaitre en popup une page.html simple, le tout en javascript.
J'ai 2 champs : nom et prenom et un bouton.
Je souhaite que lors du clic sur le bouton, une popup s'ouvre avec comme contenu les 2 champs en gras (par exemple).

J'ai essayé :

Code :

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

1
2
3
4
5
6
 
function aff_popup() {
   var w = new Window();
   w.innerHTML = "<html><body>test</body></html>";
   w.open();
}

Mais c'est pas bon

Voilà j'espere que vous pourrez me donner quelques pistes.

Merci
Sorry

Edit : je n'ai pas de probleme pour recuperer le contenu des champs, c'est l'ouverture d'une popup qui me gêne. Car ma page n'est pas en dur quelque part..

**SpaceFrog** · 04/07/2007, 15h31

un methode pas très propre avec document.write ...!

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
<script type='text/javascript'>
function popup(){
var mypopup=window.open('','Motif','toolbar=no,scrollbars=no,resizable=no,height=150,width=250,top=200,left=200');
mypopup.document.write("<html><head><title>Innovative Workload For Laboratory</title></head>");
mypopup.document.write("<body style=\"background:url('snow.gif')\"  >")
mypopup.document.write("<form><table border=1 align=center > ");
mypopup.document.write("<tr> ");
mypopup.document.write("<td >Login</td>");
mypopup.document.write("<td><input type='text' name='login' size='10' value='' /></td></tr> ");
mypopup.document.write("<tr>");
mypopup.document.write("<td>Mot de passe </td>");
mypopup.document.write("<td><input type='text' name='mdp' size='10' value=''/></td></tr> ");
mypopup.document.write("<tr><td align=center colspan=2><input type='button' onclick='window.opener.ajouterTableau(this.form,libelle.value);' value='Ajouter' /></td></tr>");
mypopup.document.write("<tr><td align=center colspan=2><input type='button' onclick='window.close();' value='Annuler' /></td></tr></table></form>"); 
mypopup.document.write("<script type='text/javascript'> document.getElementsByTagName('body')\[0\].style.backgroundColor='green'; &lt;\/script&gt;")
mypopup.document.write("&lt;body>&lt;/html>")
mypopup.document.close()
}
</script>

**sorry60** · 04/07/2007, 15h40

Hmm ça me donne une erreur :

popup is not a function

**SpaceFrog** · 04/07/2007, 15h47

mouarf ...
c'est que tu n'as pas su implémenter le code ...

Sinon voici une methode hybrique qui à l'air de vouloir tourner sous IE et FFX ...

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
21
<script type='text/javascript'>
function popup(){
var mypopup=window.open('','Motif','toolbar=no,scrollbars=no,resizable=no,height=150,width=250,top=200,left=200');
mypopup.document.write("<html><head><title></title></head><body></body></html>")
//var pagehtml=mypopup.document.createElement('html');
//var headhtml=mypopup.document.createElement('head');
//var bodyhtml=mypopup.document.createElement('body');
//pagehtml.appendChild(headhtml);
//pagehtml.appendChild(bodyhtml);
//mypopup.document.appendChild(pagehtml)
var monimage=mypopup.document.createElement('img')
var pic=new Image();
pic.src="snow.gif";
monimage.src=pic.src;
mypopup.document.body.appendChild(monimage)
mypopup.document.close()
}
</script>
</head>
 
<body onload="popup();"  >

à noter que les lignes commentées ne passent pas sous FFX ...

**sorry60** · 04/07/2007, 16h16

Ca marche pas à tous les coups

Mon code :

Code :

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

1
2
3
4
5
6
 
function popup() {
var mypopup=window.open('','Motif');
mypopup.document.write("<html><head><title></title></head><body>test</body></html>");
return false;
}

**SpaceFrog** · 04/07/2007, 16h18

met un setTimeout sur la seconde ligne ...
il faut le temps que le popup s'implémente ...

**sorry60** · 04/07/2007, 16h35

Envoyé par SpaceFrog

met un setTimeout sur la seconde ligne ...
il faut le temps que le popup s'implémente ...

Désolé mais je débute en JS.. le setTimeout tu peux m'en dire un peu plus ?

**Auteur** · 04/07/2007, 16h35

L'idéal est de créer sur ton serveur une page avec un minimum de code (fonctions de gestion de l'ouverture ou de la fermeture de la pop-up, etc...) ,cf. cet exemple ou ces scripts.

Tu appelles ensuite cette page en tant que pop-up. Il te sera ainsi plus simple d'ajouter ou supprimer des éléments dans la pop-up et d'y transférer les informations nécessaires.

**SpaceFrog** · 04/07/2007, 16h45

ce n'est pas avec toi que l'on discutait de ça l'autre jour Auteur ?
avec la securité de about:blank et l'insertion d'une image ?

on dirait que la solution hybride permette de le faire ...

sinon + 1000 pour une page html vide appelée dans le window.open

**sorry60** · 04/07/2007, 16h55

Envoyé par Auteur

L'idéal est de créer sur ton serveur une page avec un minimum de code (fonctions de gestion de l'ouverture ou de la fermeture de la pop-up, etc...) ,cf. cet exemple ou ces scripts.

Tu appelles ensuite cette page en tant que pop-up. Il te sera ainsi plus simple d'ajouter ou supprimer des éléments dans la pop-up et d'y transférer les informations nécessaires.

Oui j'avais pensé à cette solution, je pense que je vais essayer, ça sera plus pratique.

Merci à vous pour votre aide.

**Auteur** · 04/07/2007, 19h33

Envoyé par SpaceFrog

ce n'est pas avec toi que l'on discutait de ça l'autre jour Auteur ?
avec la securité de about:blank et l'insertion d'une image ?

on dirait que la solution hybride permette de le faire ...

si, si c'était avec moi

La solution hybride ?? Tu fais allusion à cette discussion

**SpaceFrog** · 04/07/2007, 19h49

oui je faisais bien allusion à ce thread ...

solution hybride = voir code ci dessus avec un bout de document.write qui à l'air de contourner le problème rencontré avec le src de l'image sous FFX

**Auteur** · 04/07/2007, 20h13

personnellement, je n'aime pas trop le document.write()

Visiblement par cette ligne de code

Code html :

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

mypopup.document.write("<html><head><title></title></head><body></body></html>")

tu crées une page blanche.

**SpaceFrog** · 04/07/2007, 20h31

je suis comme toi le document.write

mais dans ce cas de figure cela semble shunter la "sécurité" qui bloque la modification de page about:blank ..

**sorry60** · 05/07/2007, 13h13

J'ai encore un problème, j'ai essayé ça :

Code :

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

1
2
3
4
5
6
7
 
function previsu_art() {
	var page=window.open('autres/previsu.html','Prévisualisation de l\'article');
	setTimeout("",1000);
	var id_div = page.document.getElementById('id_div_center').id;
	alert(id_div);
}

Mais ça me donne une erreur :

page.document.getElementById('id_div_center') has no properties

Pourtant dans previsu.html, j'ai bien un element ayant "id_div_center" comme id :

Code :

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

1
2
<div class="div_center" id="id_div_center">
</div>

**SpaceFrog** · 05/07/2007, 14h28

oui mais la fonction qui essaye de mettre la main sur le div faut la mettre DANS le setTimeout...

**Auteur** · 05/07/2007, 14h39

le setTimeout n'interrompt pas l'exécution du script.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var page;
function afficheIdDiv()
{
	var id_div = page.document.getElementById('id_div_center').id;
	alert(id_div);
}
 
function previsu_art() {
	page=window.open('autres/previsu.html','Prévisualisation de l\'article');
	setTimeout("afficheIdDiv()","1000");
 
}

par ailleurs rien ne te dit que la page va se charger en moins d'une seconde : tout depend de son contenu et de la connexion de l'utilisateur.

**SpaceFrog** · 05/07/2007, 14h42

la seconde possibilité est de mattre un setInterval pour verifier l'existance du div (puis un clearInterval lorsque le div existe et lancer le reste de la fonction )

**sorry60** · 05/07/2007, 14h45

Ok j'avais mal compris le setTimeout(), je pensais qu'il faisait une pause, alors que non il appelle une fonction forcément au bout de xxx.

Merci à vous, je corrige

Edit : c'est nickel ! merci à vous

Creer page html simple dyamique

JavaScript

Discussions similaires

Partager

Partager