Creer page html simple dyamique

Version imprimable

04/07/2007, 15h25
sorry60

Creer page html simple dyamique
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:

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

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

Code:

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>

04/07/2007, 15h40
sorry60

Hmm ça me donne une erreur :

Citation:

popup is not a function

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:

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

Ca marche pas à tous les coups :aie:

Mon code :

Code:

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

04/07/2007, 16h18
SpaceFrog

met un setTimeout sur la seconde ligne ...
il faut le temps que le popup s'implémente ...
04/07/2007, 16h35
sorry60

Citation:

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 ?
04/07/2007, 16h35
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.
04/07/2007, 16h45
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 ...

sinon + 1000 pour une page html vide appelée dans le window.open
04/07/2007, 16h55
sorry60

Citation:

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.
04/07/2007, 19h33
Auteur

Citation:

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 :question:
04/07/2007, 19h49
SpaceFrog

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
04/07/2007, 20h13
Auteur

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

Visiblement par cette ligne de code

Code:

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

tu crées une page blanche.
04/07/2007, 20h31
SpaceFrog

je suis comme toi le document.write :vomi:

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

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

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 :

Citation:

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:

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

05/07/2007, 14h28
SpaceFrog

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

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

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.

05/07/2007, 14h42
SpaceFrog

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 )
05/07/2007, 14h45
sorry60

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