Springe zum Inhalt, oder zum Menü.

Webdesign Haas

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Buntentorsteinweg 96
28201 Bremen

Tel. 0421 / 387 13 60
Mobil: 0162 / 957 54 07
Web: www.webdesign-haas.de
E-Mail:

< CMS < Praxis < Tipps und Tricks < Automatischer Seiteninhalt

Automatischer Seiteninhalt

Allgemein

Um mit Javascript die Überschriften einer Seite auszulesen genügt schon folgendes Script ausführen zu lassen (z. B. mit onload beim laden der Seite):

function seiteninhalt(){
    var header = document.getElementsByTagName("body")[0].getElementsByTagName("h4");
    if (header.length > 1) {
        document.getElementsByTagName("h3")[0].setAttribute("id","header0");
        var toc = document.createElement("ul");
        toc.setAttribute("class","toc");
        var string = "<li><a href="#header0">Anfang</a></li>/n";
        for ( var i=0; i < header.length; i++ ) {
            header[i].setAttribute("id","header"+i);
            header[i].setAttribute("name","header"+i);
            if (toclink = header[i].firstChild.innerHTML) {}
            else
                toclink = header[i].innerHTML;
            string = string + '<li><a id="toc' + i + '" href="#header' + i + '">' + toclink + '</a></li>';
        }
        toc.innerHTML = string;
        document.getElementById("toc").appendChild(toc);
    }
}

Diese Operation funktioniert auch bei XHTML (weil nicht mit document.write() gearbeitet wird), allerdings haben Browser, die auf der Gecko-Engine basieren, wie Firefox, Mozilla usw. ein Problem mit innerHTML, sodass diese Seiten (noch) nicht als XHTML ausgeliefert werden können.

Da das Script die Überschriften selbstständig heraussucht braucht man im HTML keine weiteren Punkte beachten, die Überschrift kann ganz einfach wie folgt aussehen:

<h4>Automatischer Seiteninhalt</h4>

Durch die Abfrage der Länge des Arrays am Anfang wird der Seiteninhalt nicht angezeigt, wenn nur eine Überschrift auf der Seite vorkommt.

für XHTML und Gecko im besonderen

Man kann das oben genannte Problem mit Gecko-Browsern der ersten Generation (Mozilla, Firefox usw.) aber umgehen, indem man einig Zeilen etwas ändert:

function seiteninhalt(){
    var header = document.getElementsByTagName("body")[0].getElementsByTagName("h4");
    document.getElementsByTagName("h3")[0].setAttribute("id","header0");
    var toc = document.createElement("ul");
    toc.setAttribute("class","toc");
    var filename = document.URL.split("/")
    if (document.URL.replace(filename[filename.length-1],"") != "http://"+window.location.host+"/") {
        makeli(toc,"../","Eine Ebene höher");
    }
    if (document.URL.match("shtml") && !document.URL.match("index")) {
        makeli(toc,"./","Dieses Verzeichnis");
    }
    maketoc(header,toc);
}
function maketoc(header,toc){
    if (header.length > 1) {
        makeli(toc,"#header0","Seitenanfang");
        for ( var i=0; i < header.length; i++ ) {
            header[i].setAttribute("id","header"+i);
            header[i].setAttribute("name","header"+i);
            if (toclink = header[i].firstChild.innerHTML) {}
            else
                toclink = header[i].innerHTML;
                makeli(toc,"#header"+i,toclink);
            }
        }
        document.getElementById("toc").appendChild(toc);
}
function makeli(toc,href,text){
    var lielement = document.createElement("li");
    var innerelement = document.createElement("a");
    innerelement.setAttribute("href",href);
    elementtext = document.createTextNode(text);
    innerelement.appendChild(elementtext);
    lielement.appendChild(innerelement);
    toc.appendChild(lielement);
}

Dieses Script enthält am Anfang auch ein paar zusätzliche Zeilen, die für die Verzeichnisnavigation zusändig sind.

Sie testen, ob man sich auf der Hauptseite des Verzeichnisses befindet oder auf einer Unterseite und binden entsprechend zusätzliche Navigationselemente ein.

Jetzt funktionieren dieses Script tatsächlich in allen Browsern, die XHTML unterstützen.

Seitenanfang