Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 18 di 49
  • livello principiante
Indice lezioni

Le caratteristiche delle finestre personalizzabili

Come modificare e rendere più personalizzate le finestre aperte con JavaScript
Come modificare e rendere più personalizzate le finestre aperte con JavaScript
Link copiato negli appunti

Finora abbiamo esaminato la seguente sintassi:

window.open('percorso','nome finestra','valori separati da virgola');

in cui i primi due parametri ci permettono di specificare il percorso del file html e il nome della finestra.

Abbiamo detto che il terzo parametro (l'ultimo della lista) ci permette di creare una finestra "come vogliamo noi". Per farlo è sufficiente impostare una serie di caratteristiche separate dalla virgola (ognuna di queste variabili si può inserire oppure omettere e non comparirà). Ad esempio:

il codice è questo:

window.open('http://www.html.it','miaFinestra','width=300,height=300 ,toolbar=yes, location=no,status=yes,menubar=yes,scrollbars=no,resizable=no');

NB la riga precedente non va a capo

L'esempio crea una finestra di 300 x 300 con la barra degli strumenti, la barra del menu, la barra di stato (quella in basso), ma senza la barra degli indirizzi; la finestra non può essere inoltre ridimensionata.

Vediamo nel dettaglio quali sono le principali caratteristiche che possono essere attribuite alla finestra:

caratteristica valore spiegazione esempio
width numerico la larghezza della finestra in pixel width=400
height numerico l'altezza della finestra in pixel height=200
left numerico la distanza dalla sinistra del monitor left=300
top numerico la distanza dal lato superiore del monitor top=350
resizable yes / no indica se la finestra può essere ridimensionata o no resizable=no
fullscreen yes / no indica se la finestra va aperta a tutto schermo fullscreen=no
channelmode yes / no indica se la finestra deve essere aperta "in modalità canale" (solo per ie) channelmode=no
menubar yes / no la barra del menu (quella con scritto "file", "modifica", ecc.) menubar=no
toolbar yes / no la barra degli strumenti del browser (con i pulsanti "indietro", "avanti") toolbar=no
location yes / no la barra degli indirizzi del browser location=no
scrollbars yes / no le barre di scorrimento laterali scrollbars=no
status yes / no la barra di stato (quella in basso) status=no

Come si può intuire dagli esempi, la sintassi deve avere la forma:

caratteristica=[valore]

inoltre, come detto più volte, le varie caratteristiche devono essere separate dalla virgola. Ad esempio con:

<a href="javascript:window.open('http://www.html.it','','fullscreen=yes');">apri a tutto schermo</a>

Si apre una finestra a schermo intero (che può essere chiusa dall'utente solo utilizzando la combinazione di tasti Ctrl + W o ALT + F4).

Invece con:

window.open('sponsor.htm', '', 'width=220,height=220,scrollbars=no');

si apre una finestra analoga alla "finestra dello sponsor di HTML.it".

Per evitare ogni volta di ripetere tutte quante le caratteristiche delle finestre possiamo inoltre tener presente due scorciatoie.

  1. Quando una caratteristica viene omessa il suo valore:

    • viene impostato a "0" 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" può anche essere scritta semplicemente con "caratteristica". Ad esempio:

      window.open('http://www.html.it','','fullscreen');

Quindi al posto di:

window.open('sponsor.htm', '', '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.

basterà scrivere:

window.open('sponsor.htm', '', 'width=300,height=300,menubar,toolbar');

Ti consigliamo anche