Uno degli usi più comuni di JavaScript riguarda l'apertura e gestione di finestre, in cui vengono posizionati banner pubblicitari, messaggi per l'utente, o più semplicemente, in cui si consente la navigazione del sito senza rendere disponibili i classici menu del browser.

In questo tutorial ci proponiamo di fare una panoramica su window.open e sulle proprietà che possono essere assegnate alla finestra, non dimenticando, al termine, di citare altri metodi di window che possono risultare utili per la gestione delle nostre pop-up window.


La sintassi generica con cui si usa window.open è:


Nessun parametro è obbligatorio, anche se nomefile e gli attributi sono usati più spesso.
Gli attributi in special modo vengono usati praticamente sempre, in quanto sono proprio loro che ci consentono di aprire la finestra con le caratteristiche volute.

E' importante notare fin da subito che i parametri sono delle stringhe (non a caso sono racchiusi fra virgolette) e che quindi possono e devono essere trattati come tali.
Ad esempio per nomefile potremo specificare "pagina.html" ma potremmo anche fare riferimento ad una variabile JavaScript: FileToOpen o potremo comporre la stringa con tutti gli strumenti d'uso comune per le stringhe, ad esempio il +, quindi fare ad esempio "pagina.html?param1="+Parametro.


Quello che segue è un elenco di tutti i possibili valori che possono essere usati all'interno di una chiamata a window.open. Per gli attributi tenete conto che la maggior parte sono disponibili a partire da Navigator 2.0, tranne dove specificato diversamente.

• IDFinestra è un nome dato alla finestra che la identifica a livello di codice JavaScript. Non è un duplicato di nomefinestra in quanto se dobbiamo fare qualcosa con la finestra in una funzione JavaScript (ad esempio spostarla con moveTo(x,y)) dobbiamo identificarla per IDFinestra;
  
  
• nomefile è l'indirizzo (URL) della pagina che verrà visualizzata nella finestra. La sintassi è quella comune delle URL, occasionalmente, ad esempio se nella finestra dobbiamo scriverci dinamicamente qualcosa con document.write (v. dopo), si usa "about:blank";
  
  
• nomefinestra è una stringa che identifica la finestra a livello di codice HTML, e che può essere usata all'interno del sito nello stesso modo in cui si usa l'attributo TARGET di HREF ad esempio per la gestione dei frames. Quindi se abbiamo già aperto la finestra di pop-up e vogliamo che la destinazione di un link <A HREF>...</A> sia la nostra finestra, comporremo l'HREF come se fosse una chiamata ad un frame, quindi avremo qualcosa del tipo <A HEF="paginanuova.html" TARGET="nomefinestra"> . . . . </A>. nomefinestra può contenere solo caratteri alfanumerici e l'underscore ( _ );
  
  
• attributi è una stringa contenente una lista di parametri separati da virgole (tra parentesi il valore di default):
  • alwaysLowered (no) (Navigator 4.0+) se impostato a "yes" crea una finestra che resta sempre in secondo piano rispetto a tutte le altre applicazioni. Quest'attributo può essere specificato solo in script firmati. Non è comunque necessario firmare uno script per tenere una finestra in secondo piano, usualmente per avere lo stesso effetto si usa mettere onFocus="self.blur()" nel del file HTML caricato nella pop-up
    
  • alwaysRaised (no) (Navigator 4.0+) se impostato a "yes" crea una finestra che resta sempre in piano piano rispetto a tutte le altre applicazioni. Quest'attributo può essere specificato solo in script "firmati". Anche qui l'effetto desiderato può essere raggiunto in altro modo, sempre tramite il del documento HTML, però usando onBlur="self.focus()"
    
  • dependent (no) -Solo Netscape- crea una finestra figlia della precedente, che viene chiusa automaticamente dal browser quando la finestra principale viene chiusa. Nei sistemi Windows una finestra dependent non genera un nuovo task nella barra di stato
    
  • directories (no) se impostato a "yes" visualizza nella finestra aperta la i bottoni della directory di Netsacpe (in NN3 conteneva What's new, What's Cool, etc, in NN4 contiene la barra della Cartella personale)
    
  • height (max risoluzione utente) specifica l'altezza in pixel della finestra, compresa del bordo inferiore e della barra del titolo
    
  • hotkeys (yes) (Navigator 4) se impostato a "no" (o a "0") disabilita la maggior parte degli hotkeys che non hanno menu collegato. "Security" e "Quit" rimangono comunque attivi
    
  • innerHeight (max risoluzione utente) (Navigator 4) specifica l'altezza, in pixel, dell'area utile del browser (esclusi menu, barra di stato ecc). Quest'attributo rimpiazza height che rimane solo per compatibilità all'indietro. Per creare finestra più piccole di 100x100 pixel di area utile è necessario firmare lo script
    
  • innerWidth (max risoluzione utente) come innerHeight, ma per l'altezza
    
  • location (no) se impostao a "yes" visualizza la location bar, cioè l'area che contiene la URL del sito
    
  • menubar (no) se impostato a "yes" visualizza la barra dei menu di sistema (File, Modifica, Vai, .....)
    
  • outerHeight (max risoluzione utente) specifica la dimensione in pixel dei bordi esterni della finestra. Anche in questo caso per una finestra più piccola di 100x100 pixel è necessario firmare lo script
    
  • resizable (no) se impostato a "yes" consente all'utente di ridimensionare la finestra
    
  • screenX (arbitrario?) (Navigator 4) specifica la distanza del bordo destro della pop-up dal margine sinistro dello schermo dell'utente. Per spostare una finestra fuori dal bordo è necessario uno script firmato
    
  • screenY (arbitrario?) come screenX ma per la distanza dal margine superiore
    
  • scrollbars (no) se impostato a "yes" consente al browser di visualizzare le barre di scorrimento verticale e orizzontale se il contenuto della finestra richiede un'area maggiore di quella disponibile. Attenzione: in Internet Explorer la barra verticale viene comunque mostrata anche se resta disabilitata, per nasconderla proprio basta aggiungere modificare il BODY del pop-up aggiungendo questo parametro: <BODY .... scroll="no" ... > (Grazie a Robert per il suggerimento).
    
  • status (no) se impostato a "yes" visualizza la barra di stato del browser
    
  • titlebar (yes) se impostato a "yes" visualizza la barra del titolo. Per non visualizzarla (quindi impostare l'attributo a "no") è necessario uno script firmato
    
  • toolbar (no) se impostato a "yes" visualizza la barra dei pulsanti del browse ("Avanti, Indietro, Home, Stop, ...")
    
  • width (max risoluzione utente) come height ma per la larghezza della finestra
    
  • z-lock (yes) se impostato a "yes" crea una finestra che non va mai sotto le altre finestre quando è attivata. Anche quest'attributo richiede uno script firmato per ragioni di sicurezza
    

- Molti attributi possono essere impostati a "yes" o "no", per questi attributi si può anche usare "1" al posto di "yes" e "0" al posto di "no". Inoltre per attivare un attributo è sufficiente anche semplicemente elencarlo fra gli altri senza impostarlo esplicitamente.
- Il funzionemento di alwaysLowered, alwaysRaised e z-locked può risultare differente secondo la piattaforma in cui viene eseguito il browser. Ad esempio su sistemi Windows una finestra alwaysLowered o z-locked resta in secondo piano rispetto a tutte le finestre di tutte le applicazioni (anche non browser) aperte. Mentre su sistemi Macintosh una finestra alwaysLowered resta sicuramente sotto a tutte le altre finestre del browser, ma non necessariamente sotto rispetto alle altre finestre di altre applicazioni (ad esempio potrebbe restare in primo piano rispetto ad un word-processor).


E' possibile aprire una finestra con open, e da questa aprirne un'altra, e così via facendo si che ogni finestra aperta ne apra un'altra ancora. In questo modo ogni finestra successiva ha una proprietà opener che punta alla finestra "madre".
Netscape Communicator consente di aprire contemporaneamente 100 finestre.

Per utenti esperti: attenzione che se viene aperta ad esempio window1 e da questa viene aperta window2, e successivamente viene chiusa window1 mentre window2 è ancora aperta, è necessario impostare la proprietà openere di window2 a "null" per consentire a JavaScript di sapere che window1 non esiste più. Se questo non viene fatto l'oggetto window1 resta in memoria anche se non più necessario.



Cliccando sul link o sul pulsante viene aperta una finestra di 300 x 100 pixel in cui carichiamo la pagina "grazie.html". La finestra pop-up è con le barre di scorrimento, ridimensionabile dall'utente e con la barra di stato ancora presente:

<SCRIPT>
<!--
function finestra()
   {
   fin = window.open("grazie.html","fin","width=300,height=100,toolbar=no,status=yes")
   }
//-->
</SCRIPT>


<A HREF="javascript:finestra()">Grazie!</A>

<FORM>
   <INPUT TYPE="button" VALUE="Grazie" onClick="finestra()">
</FORM>