|
Apertura - Chiusura - Gestione di una nuova finestra  
Crediti:
Name: Andrea Bianchi
Website: Web-Link.it
Note: Aprire e gestire una nuova finestra, una delle cose che maggiormente mi vengono richieste.
Descrizione: Spesso si ha il desiderio di voler aprire una nuova finestra del browser di navigazione, capita di dover inserire al suo interno un messaggio pubblicitario, delle informazioni da mettere in evidenza o semplicemente organizzare il sito in maniera diversa.
E' possibile fare in modo che questa finestra si apra automaticamente oppure lasciare che sia il
visitatore ad aprirla associandola ad un link. Nel creare la nuova finestra è persino possibile assegnare le dimensioni, posizionamento nello schermo, stabilire se lasciare che possa essere ridimensionata oppure no, se mostrare o meno le barre di scorrimento laterali e ancora altri diversi parametri che ho elencato più avanti.
Iniziamo con il caso più richiesto: apertura di una finestra in modo automatico nel momento in cui viene richiamata una determinata pagina web:
Selezionare tutto il codice cliccando sulla forbice, quindi posizionarsi sul testo evidenziato e facendo uso del tasto destro del mouse usare le funzioni di di copia ed incolla, trasferendo così lo script nella pagina web interessata, in questo caso fra i tags: <head> e </head>
La riga di comando è molto semplice si tratta di richiamare un metodo di JavaScript: window.open()
Questo metodo accetta tre possibili parametri: url, nome, elenco valori per le caratteristiche della finestra.
url: url_pagina.htm andrà sostituito con l'url reale della pagina htm, quella appunto che dovrà essere aperta all'interno della nuova finestra.
nome: nome_pagina non è indispensabile ai fini dell'apertura anche se conviene assegnarne uno, specie poi nel caso in cui si volesse gestire al meglio la nuova finestra.
valori: xxx e yyy servono per impostare le dimensioni, sono misure espresse in pixel e si riferiscono alla larghezza e alla lunghezza della nuova finestra. Più avanti in questa stessa pagina l'elenco di tutti gli altri valori ammessi in questo parametro.
Nel caso in cui si lasciasse vuoto il parametro valori, la finestra aperta sarebbe la stessa di quella che si apre normalmente con l'apertura del browser.
Prova lo script
Aprirai una finestrella chiamata web-link con dimensioni 250 x 250 px, posizionata nell'estremo angolo superiore sinistro.
Variante 1:Posizionare la finestra in un punto preciso dello schermo.
Fra gli attributi che window.open supporta ci sono anche quelli per dichiarare le coordinate di posizionamento a partire dal margine laterale sinistro e da quello superiore: left=0 e top=0.
Selezionare tutto il codice cliccando sulla forbice, quindi posizionarsi sul testo evidenziato e adoperare il tasto destro del mouse per l'operazione di copia ed incolla, trasferendolo nella vostra pagina web, in questo caso fra i tags: <head> e </head>
Si dovrà modificare il nome che io ho adoperato per l'esempio: url_pagina.htm inserendo il nome reale della pagina htm, quella appunto che dovrà essere aperta nella nuova finestra. I valori xxx e yyy servono per impostare le dimensioni, sono misure espresse in pixel e si riferiscono alla larghezza e alla lunghezza della nuova finestra.
I valori zzz e ttt sono anch'essi espressi in pixel e si riferiscono allo spazio della nuova finestra rispetto ai margini laterale sinistro e superiore del bordo schermo.
Prova lo script
Aprirai una finestrella chiamata web-link con dimensioni 250 x 250 px posizionata a 100 px dai due bordi: sinistro e superiore.
Prova lo script
Aprirai una finestrella chiamata web-link con dimensioni 250 x 250 px posizionata a 200 px dai due bordi sinistro e superiore.
Prova lo script
Aprirai una finestrella chiamata web-link con dimensioni 250 x 250 px posizionata a 300 px dai due bordi sinistro e superiore.
Questo l'elenco dei parametri che possono essere inseriti; si commentano da soli e possono essere soltanto di tipo yes (1) o no (0) nel caso siano più di uno vanno inseriti separandoli da una virgola.
status=0,
toolbar=0,
menubar=0,
location=0,
resizable=0,
scrollbars=0,
directories=0,
Variante 2:Nel caso in cui si volesse aprire la nuova finestra soltanto in presenza di un evento come potrebbe essere il clic del mouse sopra un link.
In questo caso lo stesso codice window.open dovrà essere inserito all'interno di una funzione, questa funzione sarà poi richiamata da uno qualsiasi degli eventi Javascript.
Selezionare tutto il codice cliccando sulla forbice, quindi posizionarsi sul testo evidenziato e adoperare il tasto destro del mouse per l'operazione di copia ed incolla, trasferendolo nella vostra pagina web, in questo caso fra i tags: <head> e </head>
Adesso non rimane che decidere a quale link associare la chiamata della funzione aprifinestra() Questo un tipico esempio:
<a href="javascript:aprifinestra();">clicca qui per aprire una nuova finestra</a>
Quindi lo script c'è ma non ha alcun effetto fino a quando non viene richiamato cliccando sul link che fa riferimento alla funzione aprifinestra.
Proprio come ho fatto io per gli esempi sopra.
E se volessimo chiuderla allo stesso modo di come l'abbiamo aperta ? cioè con un link e non
con la crocetta [X] in alto del bordo ?
Semplice, basterà adoperare il metodo window.close() che è l'esatto contrario di window.open() ; se abbiamo assegnato un nome alla nostra finestra, potremo adoperare quello per fare riferimento alla sua chiusura, avrete notato che il codice ha un nome :weblink, bene quella è una variabile che contiene il nuovo oggetto windows e come tale e' possibile fare riferimento a quella variabile per sfruttarne metodi e proprietà quindi:
<a href="javascript:weblink.close();"> chiuderà la nuova finestra
Provate per rendervi conto di quanto appena appreso.
E' anche possibile aprire una finestra direttamente da un link senza alcun bisogno di funzioni da richiamare ma facendo uso di codice javascript direttamente dal link stesso:
<a href="javascript:void(0)" onclick="window.open('nome_pagina.htm','nome_pagina','width=300,height=300,left=150,top=150');"> nome del link</a>
Se poi proprio non vi fosse chiaro il meccanismo per crearle, potete affidarvi ad un generatore automatico, basterà compilare gli appositi campi del modulo.
 Elenco completo degli script.
Libera Donazione
Potete fare domande e discutere l'argomento sul Forum
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
