Výpis všech odkazů v HTML stránce
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í:
<form>
<input type=“button“ onClick=“LinkList();“ value=“Všechny odkazy na této stránce“>
</form>
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:
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Znovuuvedení domény .AD
5. září 2024 -
Vlastní web pomocí AI už může vytvořit opravdu každý
8. srpna 2024 -
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
Webový správce souborů Filestash – dojmy a recenze
29. července 2024
Nejnovější
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Znovuuvedení domény .AD
5. září 2024