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>
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.
Puoi lasciarmi un msg, un suggerimento, una critica, un link.
Elenco completo degli script.