PDA

View Full Version : [Javascript] Aprire nuova finestra e aggiungervi elementi

wingman87
30-05-2010, 22:16
Ho una pagina che fa da galleria per delle foto, è presente un link che apre la foto scelta in una nuova pagina.
Ho trovato tre modi per fare questo, con il primo non ci sono problemi ma non posso aggiungere altri elementi alla pagina (volevo aggiungere un evento onclick all'immagine), con gli altri due ho problemi o con firefox o con IE (non ho provato altri browser). Il fatto è che mi piacerebbe utilizzare uno dei due metodi che non funzionano perché sono più generali e permetterebbero di fare anche cose più carine (se funzionassero).
Ho riassunto il codice in due pagine di prova che posto qui:

File prova.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
function openInWindow(){
url="http://www.google.it/intl/en_com/images/srpr/logo1w.png";
//url="file:///C:/immagine.jpg";
/*//Questo funziona sempre ma non posso aggiungere l'evento onclick
finestra=window.open(url,"_blank","width=800,height=800,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes",false);
*/
/*//Questo funziona in Firefox ma non in IE se l'immagine è presa dal mio hardisk (cambiare la variabile url per provare)
finestra=window.open("","_blank","width=800,height=800,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes",false);
img=finestra.document.createElement("img");
img.src=url;
img.alt=url;
img.setAttribute("onclick","window.close()");
finestra.document.body.appendChild(img);
*/
/*//Questo funziona in IE ma non in Firefox
finestra=window.open("prova-popup.html","_blank","width=800,height=800,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes",false);
img=finestra.document.createElement("img");
img.src=url;
img.alt=url;
img.setAttribute("onclick","window.close()");
finestra.document.body.appendChild(img);
*/
}
</script>
<title>
Prova
</title>
</head>
<body>
<a href="javascript:openInWindow();">Clicca qui!</a>
</body>
</html>
File prova-popup.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Prova Popup
</title>
</head>
<body>
</body>
</html>
Per provare i vari metodi bisogna scommentarli dal file prova.html
MaxArt
31-05-2010, 10:16
Io userei il primo metodo. I browser, quando ti aprono un'immagine (o in generale un documento supportato) creano una pagina minimale per farla visualizzare.
Quindi puoi fare
finestra.document.body.firstChild.onclick = window.close;
wingman87
31-05-2010, 13:28
Io userei il primo metodo. I browser, quando ti aprono un'immagine (o in generale un documento supportato) creano una pagina minimale per farla visualizzare.
Quindi puoi fare
finestra.document.body.firstChild.onclick = window.close;

Purtroppo non funziona, su firefox sulla console degli errori vedo che finestra.document.body.firstChild è null (ma se guardo con firebug l'elemento img c'è) invece su IE non funziona ma l'errore dice solo "Object Required" se l'immagine è presa da internet (il logo di google), oppure non dice nulla se l'immagine è sul mio harddisk ma l'onclick non funziona (non si chiude quando la clicco).

C'è una cosa che ieri ho dimenticato di dire: l'ultimo metodo, quello che funziona su IE ma non su firefox, funziona anche su firefox se aggiungo un ritardo (almeno credo sia quello il motivo) tra quando creo la finestra e quando aggiungo gli elementi. Me ne sono accorto mettendo degli alertbox per vedere se i riferimenti esistevano e in quel caso mi visualizzava correttamente l'immagine dopo aver chiuso l'alert.
MaxArt
31-05-2010, 14:56
Evidentemente l'oggetto document.body non è ancora pronto. Leggasi: non ha ancora finito di caricare la "pagina". Fai così:
finestra=window.open(url,"_blank","");
intervWin=setInterval(function() {
if (finestra.document.body) {
clearInterval(intervWin);
finestra.document.body.firstChild.onclick=close;
},100);
wingman87
31-05-2010, 19:12
Grazie! Ho usato il metodo che mi hai suggerito in tutti e tre i metodi, alla fine ha funzionato solo nel terzo ma va bene così. Ecco la pagina funzionante sia su IE che su Firefox:
File prova.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
finestra=null;

function openInWindow(){
url="http://www.google.it/intl/en_com/images/srpr/logo1w.png";
//url="file:///C:/immagine.png";
finestra=window.open("prova-popup.html","_blank","width=800,height=800,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=yes",false);
intervWin=setInterval(function() {
if (finestra.document.body) {
clearInterval(intervWin);
img=finestra.document.createElement("img");
img.src=url;
img.alt=url;
img.setAttribute("onclick","window.close()");
finestra.document.body.appendChild(img);
}},100);
}
</script>
<title>
Prova
</title>
</head>
<body>
<a href="javascript:openInWindow();">Clicca qui!</a>
</body>
</html>