Javascript: Aprire una finestra pop-up nella posizione e della dimensione voluta

Questo javascript permette di poter aprire una finestra (cosi' detta Pop-up) della larghezza che si vuole e posizionarla sullo schermo nel punto che si preferisce.

E' bene pero' non esagerare con l'apertura selvaggia di finestre secondarie (le cosiddette pop-up), perche' gli utenti di solito non le amano molto e le chiudono appena possibile. Inoltre esistono alcuni software che consentono all'utente di impedire che i siti web aprano delle finestre secondarie nelle pagine in cui essi stanno navigando.

La sintassi
Doverosamente premesso cio', per poter aprire una finestra secondaria si deve utilizzare del javascript l'oggetto windows ed il metodo open che utilizza la seguente regola di composizione:
window.open('percorso','nome finestra','caratteristiche separate da virgola');


dove:

percorso: indica un percorso (relativo o assoluto) di un file html da inserire all'interno della finestra;

nome finestra: indica il nome della finestra che abbiamo creato (opzionale); e' comunque fondamentale rammentarsi la seguente regola: se il metodo window.open() viene richiamato due volte all'interno della stessa pagina ed esiste gia' una finestra con lo stesso nome, non vengono create due differenti finestre, ma viene ricaricato il contenuto della finestra gia' esistente (e se la seconda finestra ha caratteristiche diverse dalla prima, le nuove caratteristiche vengono ignorate, in quanto la finestra e' gia' stata "formata").
Inoltre se la finestra ha un nome, questo nome puo' essere usato come valore dell'attributo target nei tag A e FORM, come mostrato nel seguente esempio:
< a href="percorso" target="nome_finestra" >

caratteristiche separate da virgola: specifica la forma, la dimensione e la posizione della finestra, possiamo anche far si' che la finestra non sia ridimensionale, o che non ci siano le barre degli strumenti e le barre di scorrimento.

Il fatto che ciascuno di questi tre parametri (piu' propriamente si parla di argomenti, ed e' cosi' che verranno chiamati in seguito) sia delimitato da virgolette (semplici o doppie, non importa) sta' a rammentare che ci si trova in presenza di stringhe (quindi, sequenze di caratteri che possono contenere piu' istruzioni).
Ognuno di questi tre argomenti puo' essere lasciato vuoto, ma la sua presenza va comunque indicata; quindi, ad esempio, se si vorra' far aprire una finestra vuota, bastera' scrivere il seguente comando:
// apre una finestra vuota
window.open('','','');



Come si e' detto in precedenza, il terzo argomento (le caratteristiche separate da virgola) permette di creare una finestra "come si desidera".
Per farlo e' sufficiente impostare una serie di caratteristiche separate dalla virgola (ognuna di queste variabili si puo' inserire oppure omettere e non comparira'); queste sono:

width: deve avere un valore numerico e rappresenta la larghezza della finestra in pixel (per esempio: width=400);

height: deve avere un valore numerico e rappresenta l'altezza della finestra in pixel (per esempio: height=200);

left: deve avere un valore numerico e rappresenta la distanza dalla sinistra del monitor (per esempio: left=300);

top: deve avere un valore numerico e rappresenta la distanza dal lato superiore del monitor (per esempio: top=350);

resizable: deve avere come valore yes / no e indica se la finestra puo' essere ridimensionata o no (per esempio: resizable=no);

fullscreen: deve avere come valore yes / no e indica se la finestra va aperta a tutto schermo (per esempio: fullscreen=no);

channelmode: deve avere come valore yes / no e indica se la finestra deve essere aperta "in modalita' canale" (solo per ie) (per esempio: channelmode=no);

menubar: deve avere come valore yes / no e indica se si vuole che compaia la barra del menu (quella con scritto "file", "modifica", ecc.) (per esempio: menubar=no);

toolbar: deve avere come valore yes / no indica se si vuole che compaia la barra degli strumenti del browser (con i pulsanti "indietro", "avanti") (per esempio: toolbar=no);

location: deve avere come valore yes / no indica se si vuole che compaia la barra degli indirizzi del browser (per esempio: location=no);

scrollbars: deve avere come valore yes / no indica se si vuole che compaia le barre di scorrimento laterali (per esempio: scrollbars=no);

status: deve avere come valore yes / no indica se si vuole che compaia la barra di stato (quella in basso) (per esempio: status=no).

Riassumendo la sintassi deve avere la forma: caratteristica=valore

Inoltre, le varie caratteristiche devono essere separate dalla virgola senza spazi.

Per evitare ogni volta di ripetere tutte quante le caratteristiche delle finestre e' possibile inoltre tener presente due scorciatoie:

1. Quando una caratteristica viene omessa il suo valore:
* viene impostato a 0 (leggasi ZERO) nel caso di left e top
* viene impostato sull'intera grandezza dello schermo nel caso di width e left
* viene automaticamrnte impostato su no in tutti gli altri casi

2. Quando una caratteristica viene impostata su yes
* la forma "caratteristica=yes" puo' anche essere scritta semplicemente con "caratteristica". Ad esempio:
window.open('percorso','','fullscreen');
anziche'
window.open('percorso','','fullscreen=yes');



Quindi, ad esempio, al posto di:

window.open('percorso','', 'width=220,height=220,left=0,top=0,resizable=no,menubar=yes,toolbar=yes, scrollbars=no,locations=no,status=no');


NB: La riga precedente non va a capo

bastera' scrivere:
window.open('percorso','','width=300,height=300,menubar,toolbar');




Nota:
Per completezza di informazione, il metodo window.open() ha in realta' quattro argomenti e non tre; il quarto e' CRONOLOGIA:
window.open('percorso','nome finestra','caratteristiche separate da virgola','CRONOLOGIA');

L'ultimo argomento (che per la maggior parte dei casi, in un normale utilizzo del metodo windows.open(), non e' essenziale!), non e' obbligatorio da inserire o da indicare, e serve solo nel caso in cui il contenuto di una finestra debba essere ricaricato. Come detto in precedenza quando si parlava del nome della finestra, nel caso di aperture di piu' finestre, si puo' allora specificare se il nuovo valore deve sostituire il valore precedente nella cronologia, o se piuttosto deve essere inserito un nuovo valore nella cronologia, scrivendoci true
Esempio:
// Prima finestra
< a href="#" onClick="window.open('percorso','nome_finestra','');" >
< /a >

// Seconda finestra
< a href="#" onClick="window.open('percorso','nome_finestra','',true);" >
< /a >




Lo script
Tutto cio' premesso, lo script, che verra' mostrato come esempio successivamente, potra' essere inserito in qualunque punto della pagina a seconda delle esigenze, o abbinato al verificarsi di eventi, e consentira' di aprire una finestra di 300x300 pixel, distante 10 pixel dal margine sinistro ed alto della finestra, e sara' munita della barra del menu e dalla barra degli strumenti del browser.

window.open('PercorsoPaginaAprire.htm','','width=300,height=300,left=10,top=10,menubar,toolbar');


Versione .txt dello script



Suggerimenti sui vari utilizzi dello script
Qui di seguito si riportano alcune possibilita' di utilizzo dello script.
Negli esempi sono stati tolti volutamente il segno di minore e maggiore all'inizio e alla fine dei tag di apertura e di chiusura dei comandi html. Per utilizzare correttamente lo script in una pagina web vanno inseriti.

Possibilita' di aprire con un solo click due pagine diverse
< a href="#"
onClick="window.open('percorso','nome finestra','caratteristiche separate da virgola');" >
< /a >


Far aprire una finestra durante il caricamento di un'altra
< body onLoad="window.open('percorso','nome finestra','caratteristiche separate da virgola');" >
< /body >


Far aprire una finestra durante la chiusura di un'altra
body onUnLoad="window.open('percorso','nome finestra','caratteristiche separate da virgola');"
/body


Aprire una finestra a tutto schermo
< a href="javascript:window.open('percorso','','fullscreen');" >
< /a >

Ultimo aggiornamento: 09/01/2007
Copyright 2000-2014 Parlandosparlando