Gestione dei link con Javascript
- Maggio 21, 2010
- by
- Donatantonio
In questo articolo verranno descritte alcune utili funzioni per modificare tramite codice Javascript i link presenti all’interno di una pagina web. Le funzioni saranno quindi incentrate sul tag <a> e su i suoi parametri.
Realizzeremo quattro diverse funzioni:
- Modifica destinazione link (href)
- Aggiunta di un parametro all’url di un link
- Modifica destinazione e etichetta di un link
- Modifica del target di un link
La prima funzione è così definita:
<script type='text/javascript'> function nuovoLink(new_pagina){ document.getElementById('link').href=new_pagina; } </script>
La funzione nuovoLink prende come parametro l’url della nuova pagina di destinazione e aggiorna l’href.
La seconda funzione invece:
function modificaLink(parametro,valore){ var link = document.getElementById('link').href; if(link.indexOf("?")!=-1){ link = link + "&"+parametro+"="+valore+""; }else{ link = link + "?"+parametro+"="+valore+""; } document.getElementById('link').href=link; }
modificaLink permette di aggiungere all’url di un link esistente un parametro con rispettivo valore. La funzione richiede infatti in input il nome del parametro e il valore da assegnarvi, controlla qualora ci siano già parametri e concatena all’url esistente il nuovo parametro. Questa funzione può essere particolamente utile per inviare ad una determinata pagina una serie di parametri non fissi, bensì generati di volta in volta in relazione ad alcuni eventi o input dell’utente.
La terza funzione permette di modificare sia l’url che l’etichetta del link:
function cambiaLink(new_pagina,new_label){ document.getElementById('link').href=new_pagina; document.getElementById('link').innerHTML=new_label; }
La funzione cambiaLink richiede come parametri il nuovo url e una stringa che sostituirà quella presente in un link. Ad esempio chiamando la funzione:
cambiaLink(‘contatti.html’,’Vai alla pagina contatti’);
prima della chiamata : <a href=’index.html’>Vai alla home</a>
dopo la chiamata : <a href=’contatti.html’>Vai alla pagina contatti</a>
L’ultima funzione permette di modificare l’attributo target all’interno del link:
function cambiaTarget(new_target){ document.getElementById('link').target=new_target; }
Un esempio di chiamata a questa funzione potrebbe essere :
cambiaTarget(‘_blank’);
Tutti gli script illustrati in questo articolo modificano e aggiornano un ipotetico link così definito :
<a id='link' href='index.html'>Questo è un link</a>
Per provare lo script completo clicca qui.
Per scaricare lo script clicca qui.