Il sito per imparare gratuitamente a fare pagine Web

JavaScript C1
















C1 - Apertura, Chiusura, Gestione di una nuova finestra.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti:
Name: Andrea Bianchi
Website: Web-Link.it

Note: Aprire e gestire una nuova finestra.

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, il posizionamento nello schermo, stabilire se lasciare che possa essere ridimensionata oppure no, se mostrare o meno le barre di scorrimento laterali e ancora altre opzioni che ho elencato più avanti.

Iniziamo con il caso più comune: 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>

seleziona tutto

La riga di comando è molto semplice si tratta di richiamare il 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 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 avrebbe lo stesso aspetto di quella che si apre normalmente con l'apertura del browser.

Prova lo script

Aprirai una finestrella chiamata web-link con dimensioni 260 x 260 px, posizionata nell'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 dai margini laterale sinistro e 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>

seleziona tutto

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 lunghezza della nuova finestra.
I valori zzz e ttt sono anch'essi espressi in pixel e si riferiscono al posizionamento sullo schermo, praticamente lo 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 260 x 260 px posizionata a 100 px dai due bordi: sinistro e superiore.

Prova lo script

Aprirai una finestrella chiamata web-link con dimensioni 260 x 260 px posizionata a 200 px dai due bordi sinistro e superiore.

Prova lo script

Aprirai una finestrella chiamata web-link con dimensioni 260 x 260 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 ma sempre e solo all'interno della stessa coppia di apici, come negli esempi.

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>

seleziona tutto

Adesso non rimane che decidere a quale link associare la chiamata della funzione aprifinestra() Questo un possibile 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 finestra ?

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 è la variabile che contiene il nuovo oggetto windows e come tale Ŕ 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 e fare click.



Valutazione

Valutazione: 2.26 stelle su 5
N. Voti: (173)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.