Grazie a dei particolari metodi, Javascript ci permette di utilizzare sistemi diversi dal normale Tag area (A) dell'Html per creare dei link, grazie a questi possiamo linkare un file solo al verificarsi di una condizione, oppure creare dei redirect automatici, situazioni che l'Html da solo non riesce, data la sua staticità, a gestire.
Esistono tre diversi metodi per lo svolgimento di tali funzioni, la proprietà href dell'oggetto location, il metodo navigate() dell'oggetto window e la particolare funzione stringa link().
In generale possiamo dire che il primo ed il secondo si equivalgono e sono dei semplici link equivalenti al classico dell'Html, tranne per la loro capacità di essere inseriti in uno script dinamico, mentre il terzo offre la possibilità di esprimere una condizione secondo la quale, ad esempio a seconda dell'orario, il link deve puntare ad una pagina piuttosto che ad un'altra.
Iniziamo ad analizzarli singolarmente per poi scendere nello specifico ed decidere in quali situazioni scegliere di servirsi dell'uno più tosto che dell'altro o dell'altro ancora.
Proprietà href dell'oggetto location
La proprietà href dell'oggetto location è quella che si comporta in maniera analoga al link in HTML. La sua sintassi è la seguente:
location.href = "mioFile.htm";
può trovarsi inserito nei meandri di qualche semplice, o complessa che sia, funzione, oppure nell'evento onLoad della pagina, caso in cui verrà generato il redirect immediato ed istantaneo alla pagina di destinazione:
<body onLoad="location.href='mioFile.htm';">
Possiamo utilizzare questa funzione per reindirizzare i visitatori a pagine diverse a seconda della risoluzione o del browser utilizzato. Vediamo entrambi gli esempi:
Redirect a seconda della risoluzione
<script type="text/javascript">
<!--
//Reindirizza l'utente a seconda della risoluzione
if ((window.screen.width == "800") && (window.screen.height == "600")) {
location.href = "800x600.htm";
}
else if ((window.screen.width == "1024") && (window.screen.height == "768")) {
location.href = "1024x768.htm";
}
//-->
</script>
Redirect a seconda del browser utilizzato
<script type="text/javascript">
<!--
//Reindirizza l'utente a seconda del browser
if (document.all) {
location.href = "microsoft_internet_explorer.htm";
}
else if (document.layers) {
location.href = "netscape_navigator.htm";
}
else if (document.getElementById) {
location.href = "opera.htm";
}
else {
location.href = "altri_browser.htm";
}
//-->
</script>
Metodo navigate() dell'oggetto window
Praticamente analogo al precedente, lo scopo della funzione window.navigate() è quella di creare dei link.
Supponiamo di voler assegnare un link ad un bottone di un modulo HTML, a un testo o a un'immagine. Nel primo caso dobbiamo ad ogni costo ricorrere ad un linguaggio di scripting perchè funzioni, negli altri due casi si potrebbe, utilizzando l'HTML, utilizzare il Tag area. Con Javascript invece assegniamo all'evento onclick l'esecuzione di un link. Esaminiamo questi tre esempi in sequenza:
Link da un bottone di un modulo
<input type="button" value="Bottone con link" onClick="window.navigate('mioFile.htm')">
Link su un semplice testo
<div onClick="window.navigate('mioFile.htm')">Semplice testo linkabile</div>
Link da un'immagine
<img src="miaImmagine.htm" onClick="window.navigate('mioFile.htm')">
Funzione link()
Eccoci giunti alla parte clou di questo Tutorial, senza nulla togliere agli altri metodi fin ora presentati ed a quelli che vedremo in seguito. Ora vedremo come generare dinamicamente un link a seconda di un evento utilizzando le stringhe.
La sintassi della funzione link() si differenzia, anche se non in particolar modo, da quella affrontata in questo momento. Il suo scopo è quello di essere inclusa in una stringa di testo ed associata ad una variabile di tipo string, ecco la sintassi:
document.write(variabileString.link("mioFile.htm"));
Creiamo una routine che ci permetta di avere un link differente a seconda dell'orario: uno alla mattina, uno al pomeriggio, uno alla sera ed uno di notte.
<script type="text/javascript">
<!--
var orario = new Date();
var oo = orario.getHours();
var Stringa = "Visita questo link";
if (oo > 06 && oo <= 12) {
document.write(Stringa.link("giorno.htm"));
}
else if (oo > 12 && oo <= 18) {
document.write(Stringa.link("pomeriggio.htm"));
}
else if () {
document.write(Stringa.link("sera.htm"));
}
else {
document.write(Stringa.link("notte.htm"));
}
//-->
</script>
Nella variabile Stringa siamo andati a memorizzare il testo che verrà stampato a video che sarà lo stesso ad ogni ora del giorno, mentre il link associato cambia a seconda dell'orario per effetto della funzione link() in cui viene passato come parametro (tra parentesi tonde) il link di destinazione.
Link ai frameset
Caso particolare che si presenta quando si lavora con i link Javascript, è quello di indirizzare un link verso un altro frameset. Per questo scopo ci viene in soccorso l'oggetto parent, creato proprio per lavorare con i frame.
Con semplice codice HTML è sufficiente impostare il target verso il nome del frameset di destinazione come riportato nell'esempio:
<a href="mioFile.htm" target="NOME_FRAME">Link verso un altro frameset</a>
Con Javascript è possibile ottenere la stessa funzione in questo modo:
parent.NOME_FRAME.location.href = "mioFile.htm";
Per praticità e chiarezza degli esempi a seguire, costruiamo un frameset generico con una colonna in orizzontale e due in verticale, i cui nomi identificativi saranno intestazione per il frameset in orizzontale, menu e principale per i due frameset in verticale:
<frameset rows="20%,*" border="yes">
<frame src="intestazione.htm" name="intestazione" scrolling="no" noresize>
<frameset cols="20%,*" border="yes">
<frame src="menu.htm" name="menu" scrolling="no" noresize>
<frame src="principale.htm" name="principale" scrolling="auto" noresize>
</frameset>
la pagina generata con questo codice avrà più o meno questo aspetto:
| NOME FRAME = intestazione | |
| NOME FRAME = menu | NOME FRAME = principale |
Si presume che il lettore abbia una certa dimestichezza con i frame, in caso contrario consiglio di consultare la guida ai frame HTML di HTML.it.
Utilizziamo il codice JavaScript presentato in precedenza per realizzare un link da un frameset all'altro. Creiamo un link dal frameset menu a principale, ecco un esempio di codice:
<a href="javascript:parent.principale.location.href='mioFile.htm'">Link verso il frameset principale</a>
In un caso del genere sconsiglio questa scomoda nonchè più lunga procedura, vediamo quindi per quale funzione può tornarci effettivamente utile un simile utilizzo di Javascript.
Si supponga di avere la necessità di creare una funzione che aggiorni due (o più) frameset contemporaneamente, ovvero di sostituire i file caricati per default all'interno di due o più frameset.
Sarà sufficiente creare una funzione in cui vengono passate le stringhe presentate nell'esempio precedente, sia per un frameset che per l'altro. Nell'esempio aggiorneremo con un solo click i frameset intestazione e principale dal frameset menu:
<script type="text/javascript">
<!--
function aggiornaFrames() {
parent.intestazione.location.href = "mioFile.htm";
parent.principale.location.href = "altroFile.htm";
}
//-->
</script>
Il link nel frameset menu sarà il seguente:
<a href="javascript:aggiornaFrames()">Link verso due frameset</a>
Apertura di file in nuove finestre
Concludo questo Tutorial sui link in Javascript per accennare all'ultimo dei metodi con cui è possibile generare dei link, in questo caso aprendo nuove istanze del browser, ovvero in altre finestre.
Con l'utilizzo del metodo open() dell'oggetto window è possibile ottenere lo stesso risultato generato dal codice Html
<a href="mioFile.htm" target="_blank">Link in una nuova finestra</a>
ad esempio su di un bottone
<input type="button" value="Link in una nuova finestra" onClick="window.open('mioFile.htm')">
Questo particolare argomento è spiegato dettagliatamente nell'articolo sulle Le standard Popup: le popup dinamiche - Ver. I.
