[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

Codice PHP:


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

Codice PHP:


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

Quote:

Originariamente inviato da MaxArt

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

Codice PHP:


			
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

Codice PHP:


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

30-05-2010, 22:16	#1
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2791	[Javascript] Aprire nuova finestra e aggiungervi elementi 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 Codice PHP: <!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 Codice PHP: `<!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

31-05-2010, 10:16	#2
MaxArt Senior Member Iscritto dal: Apr 2004 Città: Livorno Messaggi: 6659	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; __________________ HWU Rugby Group :'( - FAQ Processori - Aurea Sectio - CogitoWeb: idee varie sviluppando nel web

31-05-2010, 14:56	#4
MaxArt Senior Member Iscritto dal: Apr 2004 Città: Livorno Messaggi: 6659	Evidentemente l'oggetto document.body non è ancora pronto. Leggasi: non ha ancora finito di caricare la "pagina". Fai così: Codice PHP: `finestra=window.open(url,"_blank",""); intervWin=setInterval(function() { if (finestra.document.body) { clearInterval(intervWin); finestra.document.body.firstChild.onclick=close; },100);` __________________ HWU Rugby Group :'( - FAQ Processori - Aurea Sectio - CogitoWeb: idee varie sviluppando nel web

31-05-2010, 19:12	#5
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2791	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 Codice PHP: <!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> Ultima modifica di wingman87 : 31-05-2010 alle 19:20.

Strumenti
Mostra una versione stampabile Invia questa pagina per email