Lo script che presentiamo sarà utile per separare i link presenti all'interno di un testo. Con un semplice click verranno elencati, in una comoda popup, i collegamenti inseriti nella pagina in modo da favorirne la consultazione.
Il codice è compatibile con i tre maggiori browser: Explorer, Netscape 6.x e Navigator 4.x.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi.
Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo questo codice tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
<!--
//imposta il testo per il link
var testo_link = "Mostra i link prensenti in questa pagina";
function LinkList() {
var myheader = "<head><title>Ecco i link prensenti in
"+document.title+"</title></head>
<body>";
myheader = myheader + "<body>";
var myfont = "<font style="font: 8pt Verdana, Arial, Helvetica, Sans-serif;
line-height:18pt;" face="verdana, tahoma, geneva" size="-1">";
var mytext = "<div align="center"><strong>Ecco i link prensenti in
questa pagina</strong></div><ol>";
var myendfont = "</font>";
var myendheader = "</corpo>
</body>";
windowprops =
"menubars=no,location=no,toolbars=no,scrollbars=yes,"+"width="450",height=330,top=50,left=50";
self.name = "main";
if(document.all) {
for (i=0; i<document.links.length; i++) {
if(document.links[i].innerText != testo_link ){
if(document.links[i].innerText)
if(document.links[i].innerText != " ")
mytext += "<li><a target='_new'
href="+document.links[i]+">"+document.links[i].innerText+"</a><br />";
else
mytext += "<li><a target='_new'
href="+document.links[i]+">"+document.links[i]+"</a><br />" ;
}
}
}
else {
for (i=0; i<document.links.length; i++) {
if(document.links[i].text != testo_link ){
if(document.links[i].text) {
if(((document.links[i].text).indexOf("javascript:")) == -1) {
mytext += "<li><a target='_new'
href="+document.links[i]+">"+document.links[i].text+"</a><br />" ;
}
}
}
else { }
}
}
mytext = mytext + "</ol><div align="center"><a
href='javascript:window.close()'>Chiudi</a></div><br />";
linkswin = window.open("","",windowprops);
with (linkswin.document) {
open();
write(myheader + myfont + mytext + myendfont + myendheader);
close();
}
}
// -->
</script>
Vediamo cosa modificare in base alle nostre esigenze.
var testo_link = "Mostra i link prensenti in questa pagina";
indica il testo del link che aprirà la popup. questa variabile è necessaria per poter escludere il link che richiama il codice dalla lista che verrà proposta.
var myheader = "<head>
<title>Ecco i link prensenti in
"+document.title+"</title></head>
<body>";
myheader = myheader + "<body>";
var myfont = "<font style="font: 8pt Verdana, Arial, Helvetica, Sans-
serif; line-height:18pt;" face="verdana, tahoma, geneva" size="-1">";
var mytext = "<div align="center"><strong>Ecco i link prensenti
in questa pagina</strong></div><ol>";
var myendfont = "</font>";
var myendheader = "</corpo>
</body>";
come è facile intuire tutte queste variabili servono per "costruire" la pagina della popup. Possono essere personalizzate a piacimento. Nell'ordine potremo modificare:
myheader = il titolo, l'head, il body
myfont = il tipo di font utilizzato
mytext = l'intestazione della pagina
myendfont = variabile necessaria per chiudere il tag font
myendheader = variabile necessaria per chiudere il tag <body>
Sarà anche possibile, ovviamente, aggiungere nuove variabili a seconda delle nostre preferenze. L'unica cosa necessaria sarà cercare questa riga alla fine del codice:
write(myheader + myfont + mytext + myendfont + myendheader);
ed aggiungere, con un segno +, il nome della nuova variabile introdotta
windowprops = "menubars=no,location=no,toolbars=no,scrollbars=yes,
"+"width="450",height=330,top=50,left=50";
in questa variabile impostiamo i parametri per la popup: caratteristiche (scrollbars, statusbar etc), larghezza, altezza, distanza dal bordo superiore, distanza dal bordo sinistro.
mytext = mytext + "</ol><div align="center"><a href='javascript:window.close()'>Chiudi</a></div><BR>";
è la variabile per definire il link di chiusura della popup
A questo punto non ci resta che inserire il collegamento che richiama il codice. Il link andrà nel punto desiderato all'interno della pagina:
<a href="javascript:LinkList();"><script>document.write(testo_link);</script></a>
Ricordo anche che i link verranno mostrati nell'ordine in cui si trovano nella pagina principale.
Altre modifiche non sono necessarie.
