Come aprire i link in una nuova pagina o in una finestra popup

Una domanda che mi è stata posta molto spesso, sia via email che nei commenti, è proprio:

come è possibile aprire un link in una nuova pagina o in una finestra popup?

Ieri chattando con Sauro, mi ha fatto notare che molte cose che a me sembrano banali e che do per scontato sono invece di grande aiuto per chi è alle prime armi con l'html.
Ho deciso quindi di scrivere questo post...

Già tempo fa, su richiesta di Gianpy, ho scritto il post Come aprire una finestra popup dal blog: lo script che ho realizzato consente di visualizzare nel popup una porzione del post cliccando su un link.

Oggi vediamo invece come aprire un link in una nuova pagina o in un popup, utile sia per chi ha un blog su Blogger che su altre piattaforme.

Innanzitutto la sintassi di un link è la seguente:

<a href="indirizzo">Nome</a>

dove indirizzo può essere l'url di un blog, un sito, un'immagine o un vostro post mentre Nome rappresenta il nome visualizzato nella pagina. Ad esempio se scrivo:

<a href="http://www.flickr.com/photos/ioleblog/">Le mie header su Flickr!</a>

nella pagina visualizzo la stringa "Le mie header su Flickr!" e cliccando sul link visualizzo la pagina di Flickr con le mie header.

Non avendo impostato alcuna proprietà del link, l'indirizzo viene aperto nella stessa pagina in cui ci troviamo.
Per aprire invece un link in una nuova finestra basta aggiungere la proprietà target in questo modo:

<a href="indirizzo" target="_blank">Nome</a>

Quando l'attributo target viene omesso, di default il link viene aperto nella stessa pagina.

Al posto di un Nome, è possibile anche inserire un'immagine; la sintassi allora diventa:

<a href="indirizzo" target="_blank"><img src="indirizzo_immagine" /></a>

Ed ecco il risultato: Le mie header su Flickr! (in una nuova pagina)

Per aprire il link in un popup, la sintassi invece è la seguente:

<a onclick="window.open('indirizzo','nome finestra','caratteristiche finestra');">Nome</a>

dove indirizzo e Nome hanno lo stesso signifivato di prima, mentre nome finestra serve ad identificare la finestra che andiamo ad aprire (è opzionale, quindi possiamo scrivere anche '').

Per quanto riguarda le caratteristiche finestra eccone alcune:

• width e height: larghezza e altezza della finestra in pixel
  (es. width=500,height=400)
• left e top: distanza da sinistra e dal lato superiore del monitor
  (es. left=200,top=300)
• resizable: la finestra può essere ridimensionata
  (resizable=yes oppure resizable=no)
• fullscreen: la finestra viene aperta a tutto schermo
  (fullscreen=yes oppure fullscreen=no)
• menubar: la finestra ha la barra del menu
  (menubar=yes oppure menubar=no)
• toolbar: la finestra ha la barra degli strumenti del browser
  (toolbar=yes oppure toolbar=no)
• location: la finestra ha la barra degli indirizzi del browser
  (location=yes oppure location=no)
• scrollbars: la finestra ha le barre di scorrimento laterali
  (scrollbars=yes oppure scrollbars=no)
• status: la finestra ha la barra di stato
  (status=yes oppure status=no)

Le caratteristiche vanno separate con una virgola.

Vediamo insieme un esempio: un popup con dimensioni 800x600px fisse (cioè non ridimensionabile), posizionato in alto a sinistra del monitor, senza alcuna barra.

<a href="#" onclick="window.open('http://www.flickr.com/photos/ioleblog/', '', 'width=800,height=600,left=0,top=0,resizable=no,menubar=no,toolbar=no,location=no,scrollbars=no,status=no');">Le mie header su Flickr</a>

ed ecco il risultato: Le mie header su Flickr! (in un popup)

Resto a disposizione per ogni dubbio o chiarimento.

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.