to Top Page
Hot Web Guide
GUESTBOOK (Libro degli ospiti)
Consiglia il Sito ad un amico
BOOKMARK (Aggiungi ai Preferiti)
-
... / Guida Javascript / L'oggetto window, finestre popup e finestre di dialogo

L'oggetto window in Javascript

L'oggetto window in pratica rappresenta la finestra del Browser, e quindi consente di gestire le proprietà e i metodi associati ad essa. Se la finestra contiene più frames (<iframe>), il browser creerà un'oggetto window per la finestra principale e tanti altri per quanti sono i frame della pagina.

Proprietà dell'oggetto window

  • frames - (GET) array con tutti i frames presenti nella pagina
  • innerHeight e innerWidth - (GET) altezza e larghezza interna della finestra del browser
  • lenght - (GET) numero dei frames presenti nella finestra
  • opener - (GET) riferimento alla finestra madre che ha aperto la finestra corrente (se esiste)
  • outerHeight e outerWidth - (GET) altezza e larghezza esterna della finestra del browser (compresi toolbar e scrollbar)
  • pageXOffset e pageYOffset - (GET) valore (in pixel) dell'eventuale scroll sull'asse orizzontale e verticale
  • parent - (GET) riferimento alla finestra che contiene il frame corrente
  • self - (GET) riferimento alla finestra corrente
  • top - (GET) riferimento alla finestra principale (utile in caso di frames incapsulati)

Metodi dell'oggetto window

  • alert() - mostra una finestra di avviso
  • close() - chiude la finestra corrente
  • confirm() - mostra una finestra di dialogo con un messaggio di conferma
  • open() - apre una nuova finestra
  • print() - invia alla stampante il contenuto della finestra corrente
  • prompt() - apre una finestra di dialogo dove l'utente può scrivere qualcosa in un campo testo
  • scrollTo() - esegue uno scrolling automatico del documento verso le coordinate specificate
  • setInterval() e clearInterval() - imposta ed annulla una serie di istruzioni da eseguirsi ad intervalli di tempo prestabiliti
  • setTimeout() e clearTimeout() - imposta ed annulla una serie di istruzioni da eseguirsi una volta dopo un dato intervallo di tempo

Gestione di finestre: pop-up

Javascript con il metodo open consente di aprire "al volo" una nuova finestra del Browser e di visualizzare in essa una pagina esistente o da costruire nuove mediante il metodo di scrittura document.write. Queste finestre sono dette Pop-up. Le Pop-up possono essere personalizzate in alcune caratteristiche come le dimensioni, la presenza o meno della statusbar, della scrollbar, ecc.
Sintassi:
window.open('URL');
Esempio:
window.open('http://www.google.it/');
... se poi alla finestra vogliamo impostare altri parametri la sintassi è:
window.open('URL', 'Nome della finestra', 'Stile');
Attraverso il parametro "stile" è possibile personalizzare la finestra.
  • top e left - definisce in pixel la posizione della finestra dal margine superiore e sinistro dello schermo
  • width e height - definisce larghezza ed altezza in pixel della finestra
  • status - barra di stato (yes/no)
  • menubar - barra dei menu (yes/no)
  • toolbar - barra degli strumenti (yes/no)
  • scrollbars - barre di scorrimento (yes/no)
Esempio:
function apriPopUp(url) {
  var stile = "top=10, left=10, width=250, height=200, status=no, menubar=no, toolbar=no scrollbars=no";
  window.open(url, '', stile);
}
Pop-up centrato nella pagina
Per un posizionamento centrato di una pop-up nella finestra del browser bisogna settare top e left in modo corretto rispetto alla risoluzione dello schermo.
Esempio apertura finestra pop-up 400x200px:
<script language="javascript">

function apriPopUp(url,w,h) {
  var popTop = Math.floor((screen.height-h)/2);
  var popLeft = Math.floor((screen.width-w)/2);
  var stile = "top="+popTop+", left="+popLeft+", width="+w+", height="+h+", status=no, menubar=no, toolbar=no scrollbars=no";
  window.open(url, '', stile);
}

</script>

<input type="button" value = "apri Google" onclick="apriPopUp('https://www.google.it/','400','200');" />
esegui Esempio:

Le finestre di Dialogo

Oltre alle Pop-up l'oggetto window da la possibilità allo sviluppatore di interagire con gli utenti mediante le finestre di dialogo. Queste sono gestite con tre metodi: alert(), confirm() e prompt(), di cui abbiamo già parlato nel capitolo "Istruzioni di output ed input".

alert()

Con il metodo alert è possibile creare delle finestre di avviso (alert box) con messaggi personalizzati. L'utente può solo cliccare sul tasto OK per chiuderla poichè il focus si sposta su alert e non può interagire con altri elementi della pagina sino a quando non è chiuso l'avviso.
Sintassi:
alert('Messaggio...');
Esempio:
<input type="button" value = "esegui Alert" onclick="alert('Ciao! Sono un Avviso!');" />


confirm()

Confirm a differenza di alert è una finestra per richeste di conferma che dà la possibilità all'utente di cliccare su OK o Annulla. Il metodo confirm restituisce "true" per OK e "false" per Annulla.
Esempio:
<script language="javascript">

function txtConfirm() {
  var domanda = confirm("Premi un bottone");
  if (domanda === true) {
    alert("Hai premuto OK");
  }else{
    alert("Hai premuto Annulla");
  }
}

</script>

<input type="button" value = "esegui Esempio" onclick="txtConfirm();" />

... esempio più pratico:
<script language="javascript">

function vaiLink() {
  var domanda = confirm("Sei sicuro di voler visitare Google?");
  if (domanda === true) {
    location.href = 'https://www.google.it';  
  }
}

</script>

<input type="button" value = "vai a Google" onclick="vaiLink();" />

oppure su un link:

<a href='https://www.google.it' onclick="return confirm('Sei sicuro di voler visitare Google?')">vai a Google</a>


oppure su un link: vai a Google

prompt()

Prompt apre una finestra di dialogo con un campo di testo all'interno del quale l'utente può inserire del testo. Se l'utente clicca su OK il prompt restituisce il valore inserito, in caso contrario restituisce null. Prompt ammette due argomenti: la descrizione di ciò che si chiede all'utente di inserire nella casella di testo e un valore di default (la casella di testo "pre-compilata" con il valore indicato).
Esempio:
<script language="javascript">

function nome() {
  var nome = prompt("Inserisci il tuo nome", "Mario Rossi");

  if (nome != null) {
      alert('Ciao '+ nome);
  }
}

</script>

<input type="button" value = "esegui Esempio" onclick="nome();" />
Come ritieni i contenuti del Sito Web ?
... dai il tuo giudizio!
Giudizio Utenti: 4,3 (Eccellente)
200 voti
Eccellente 38,1% (77)
Buono 56,9% (115)
Sufficente 3,5% (7)
Mediocre 0,5% (1)
Scarso 1% (2)