finestre popup su webfract - di Eliana Argenti e Tommaso Bientinesi

Home

GUIDA HTML

Contatti

POPUP: CONTENUTO DINAMICO

Codice
Richiamare il codice
Esempi
Caratteristiche
Tutorial

Contenuto dinamico
Passare i dati
Problemi
Immagini
JukeBox

Abbiamo già visto che è possibile caricare una pagina HTML in una popup. E' però possibile scrivere direttamente, per mezzo di JavaScript, in una finestra. Questo metodo è molto utile, anche se dobbiamo avvisare che non funziona con i vecchi browsers.

ESEMPIO

Script da inserire fra i tag <HEAD> ed </HEAD>
<script LANGUAGE="JavaScript" type="text/javascript"> function apri() { var prova = window.open('','nome','scrollbars=yes,top=100,left=400,width=350,height=200'); var contenuto = prova.document; contenuto.write('<html><head><title>Esempio popup dinamica</title>'); contenuto.write('</head><body bgcolor=maroon link="darkorange" vlink="silver"><p><font color=white>Ecco una popup scritta in modo dinamico.</p>'); contenuto.write('<p>Questa pagina è stata generata da un semplice script.</p>') contenuto.write('<p>Come si vede è possibile cambiare il colore dello sfondo, delle parole... si possono inserire tutti i normali tag HTML</p>'); contenuto.write('<p align=center><a href="javascript:self.close()">Chiudi</a> la popup.</p>'); contenuto.write('</body></html>'); contenuto.close(); if (window.focus) {prova.focus()} } </script>
Codice per richiamare la funzione
<A href="javascript:apri()">Clicca qui!</A>
Risultato: Clicca qui!
Analizziamo nel dettaglio il codice.

Script da inserire fra i tag `<HEAD>` ed `</HEAD>`
<script LANGUAGE="JavaScript" type="text/javascript"> function apri() { var prova = window.open('','nome','scrollbars=yes,top=100,left=400,width=350,height=200'); var contenuto = prova.document; contenuto.write('<html><head><title>Esempio popup dinamica</title>'); contenuto.write('</head><body bgcolor=maroon link="darkorange" vlink="silver"><p><font color=white>Ecco una popup scritta in modo dinamico.</p>'); contenuto.write('<p>Questa pagina è stata generata da un semplice script.</p>') contenuto.write('<p>Come si vede è possibile cambiare il colore dello sfondo, delle parole... si possono inserire tutti i normali tag HTML</p>'); contenuto.write('<p align=center><a href="javascript:self.close()">Chiudi</a> la popup.</p>'); contenuto.write('</body></html>'); contenuto.close(); if (window.focus) {prova.focus()} } </script>
Codice per richiamare la funzione
<A href="javascript:apri()">Clicca qui!</A> `Risultato: Clicca qui!`
Analizziamo nel dettaglio il codice.

IL CODICE PASSO PER PASSO

`var prova = window.open...`	`Viene caricata la finestra nella variabile di nome prova`
`var contenuto = prova.document;`	`La proprietà document (ovvero la pagina dei contenuti) viene assegnata alla variabile di nome contenuto`
`contenuto.write(...)`	`Istruzione che visualizza nella pagina il contenuto posto fra le parentesi.`
`Nel nostro esempio il contenuto, posto fra apici, è composto di codice HTML. Abbiamo ripetuto più volte l'istruzione contenuto.write per maggiore chiarezza, ma avremmo anche potuto formare il contenuto della pagina continuando a scrivere all'interno della prima parentesi ma senza mai andare a capo.`
`contenuto.close();`	`Viene comunicato al browser che è terminata la procedura di apertura della finestra e di scrittura del documento. Se non si include questa riga di codice non avranno luogo né la stampa né altri eventuali comandi sulla pagina che abbiamo appena aperta.`
`if (window.focus) {prova.focus()}`	`La finestra viene posta in primo piano`

Se vogliamo solo una finestra che visualizzi un messaggio oppure serva ad inserire dei dati possiamo far uso delle finestre predefinite javascript: cliccando sul link si accede alla spiegazione dei metodi alert, prompt e confirm.

Caratteristiche
Inizio pagina
Passare i dati