Le caratteristiche delle finestre personalizzabili



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:

caratteristicavalorespiegazioneesempio
widthnumericola larghezza della finestra in pixelwidth=400
heightnumericol'altezza della finestra in pixelheight=200
leftnumericola distanza dalla sinistra del monitorleft=300
topnumericola distanza dal lato superiore del monitortop=350
resizableyes / noindica se la finestra può essere ridimensionata o noresizable=no
fullscreenyes / noindica se la finestra va aperta a tutto schermofullscreen=no
channelmodeyes / noindica se la finestra deve essere aperta "in modalità canale" (solo per ie)channelmode=no
menubaryes / nola barra del menu (quella con scritto "file", "modifica", ecc.)menubar=no
toolbar yes / nola barra degli strumenti del browser (con i pulsanti "indietro", "avanti")toolbar=no
locationyes / nola barra degli indirizzi del browserlocation=no
scrollbarsyes / nole barre di scorrimento lateraliscrollbars=no
statusyes / nola 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');

Ultimi articoli JavaScript

PhantomJS, headless browser per test con Javascript

Il tool ideale per realizzare, da terminale, operazioni in remoto su...

Creare e leggere QR Code in JavaScript

Applicazioni 'QR Code enabled' per il Web e per il mobile,...

Jquery UI Map: web-mapping con Google Maps e jQuery

Un plugin di jQuery UI per intefacciare applicaizoni Web/mobile con...

Scrollorama e Scrolldeck, slideshow d'effetto con jQuery

Plugin jQuery per ottenere Slideshow con diversi effetti di scrolling

jCanvas, un primo semplice grafico

Alla scoperta della libreria jCanvas, per semplificare il disegno e...

Altri articoli

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida Javascript: tecniche avanzate

Una guida dal taglio pratico per approfondire la programmazione a...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti