Výpis všech odkazů v HTML stránce

12. listopadu 2003

•

Kolik odkazů vlastně obsahuje průměrná HTML stránka běžného webu? Deset? Padesát? Sto? Následující navigační pomůcka, napsaná v JavaScriptu, zobrazí do zvláštního okna seznam všech odkazů v HTML stránce, takže se v nich uživatel může snadno zorientovat.

Malý ilustrační příklad – po stisku tlačítka jsou do zvláštního okna zobrazeny všechny odkazy obsažené ve stránce, přičemž skript vynechává duplicity a odkazy, které z nějakého důvodu nechceme zahrnout do seznamu, v tomto případě odkazy na obrázky. Mimochodem, uživatelé Internet Exploreru 5+ mohou podobnou funkci získat přímo v kontextovém menu nainstalováním doplňku Web Developer Accessories.

Popis skriptu

Celý skript je tvořen jedinou dlouhou funkcí LinkList, která je volána po stisku příslušného tlačítka. HTML kód formuláře s tlačítkem je prost záludností:

Funkci LinkList definujeme v hlavičce stránky. Jejím úkolem je získat seznam všech odkazů z HTML stránky, vytřídit z něj duplicity a „nevhodné“ odkazy, zformátovat HTML kód nově otevíraného okna a nakonec toto okno otevřít a zmíněný HTML kód do něj vepsat. Žádná z těchto činností není sama o sobě nijak složitá, protože je však celý kód funkce LinkList trochu dlouhý, vypíšeme si jej po částech.

Nejprve hlavička funkce a deklarace pomocných proměnných. Do pole a ukládáme nalezené odkazy, pole at je úložištěm textů „nad“ těmito odkazy a v třetím poli acnt sčítáme (v případě duplicit), kolik bylo kterých odkazů nalezeno:

function LinkList() {
var a = new Array();
var at = new Array();
var acnt = new Array();
var i,j,txt;

HTML kód pro nové okno bude skládán do proměnné mytext. Začneme hrstí vcelku nezajímavých formátovacích elementů:

var mytext = ‚<html><head><meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>\n‘;
mytext += „<title>Odkazy v \““+document.title+“\“</title></head><body bgcolor=’silver‘>“;
mytext += „<font style=\“font: 8pt Verdana, Arial, Helvetica, Sans-serif; line-height:18pt;\“ face=\“verdana, tahoma, geneva\“ size=\“-1\“ >“;
mytext += „<center><b>Odkazy v \““ + document.title + „\“</b><ol></center>“;

Následuje zjištění všech odkazů v „mateřské“ HTML stránce. Odkazy čteme z pole document.links, podmínka na druhém řádku má svůj původ v obvyklé inkompatibilitě prohlížečů. Podmínka zhruba uprostřed následujícího kódu vyřazuje nevhodné odkazy (v tomto případě odkazy na gif a jpg obrázky), smyčka s řídící proměnnou j slouží k mazání duplicitních odkazů:

for (i=0; i<document.links.length; i++) {
    if(document.links[i].innerText)
        txt = document.links[i].innerText;
    else
        txt = document.links[i].text;
    if(txt) {
        a[i] = document.links[i].href;
        at[i] = String(txt);
        acnt[i] = 1;
        if( (String(a[i]).indexOf(„.gif“)!=-1) || (String(a[i]).indexOf(„.jpg“)!=-1) || (String(a[i]).indexOf(„.jpeg“)!=-1) )
            acnt[i] = 0;
        if(acnt[i])
            for(j=0; j<i; j++ ) {
                if( String(a[j]) == String(a[i]) ) {
                    acnt[i] = 0; acnt[j]++;
                }
            }
    }
}

Následuje přepis odkazů z polí a, at a acnt do HTML kódu nově vytvářeného okna…

for (i=0; i<document.links.length; i++) {
    if(acnt[i]) {
        tt = acnt[i]>1 ? “ (“ + String(acnt[i]) + „x)“ : „“;
        mytext += „<li><a target=’_new‘ href=“+a[i]+“>“+at[i]+“</a>“+tt+“<br>“;
    }
}

… a ukončení HTML kódu závěrečnými tagy a odkazem pro zavření okna:

mytext += „</ol><center><a href=’javascript:window.close()‘>Zavřít</a></center><BR></font></body></html>“;

Poslední částí funkce je vlastní vytvoření nového okna a zápis již hotového HTML do jeho útrob. Za kódem následuje jedna pravá složená závorka navíc jako ukončení definice funkce LinkList:

    linkswin = window.open(„“, „“, „menubars=no, location=no, toolbars=no, scrollbars=yes, “ + „width=350, height=400, top=50, left=50“);
    with (linkswin.document) {
        open();
        write( mytext );
        close();
    }
}

K nahlédnutí je připraven kompletní zdrojový kód tohoto jednoduchého příkladu a pokud vás zajímá, jak je na tom s odkazy třeba právě tato stránka, klikněte na následující tlačítko: