webdesign » Javascript Tipps » Back-Button-Problem

Zwei Frameinhalte gleichzeitig lassen sich nur durch tiefere Verschachtelung des Framesets oder per Javascript wechseln. Die Javascript-Lösung birgt den Nachteil, daß ein Navigieren über den Back-Button immer nur einen Schritt zurückgeht. In der Folge passen möglicherweise Frameinhalt und Navigation nicht mehr zusammen.

Besteht ein Frameset beispielsweise aus einer Hauptnavigation, dem Content und der dazu gehörigen Seitennavigation kann man wie folgt vorgehen: Aus der Hauptnavigation wird per Html-Link eine Datei im Content-Frame aufgerufen. Dort prüft ein Javascript den Inhalt der Seitennavigation. Mit der Window-Methode window.location.replace() wird - falls nötig - die Datei für die Seitennavigation gerufen. Da window.location.replace() den Eintrag in der History ersetzt, werden beim Zurückgehen per Back-Button nur die Inhalte des Content-Frames gewechselt. Diese rufen beim Laden selbstständig die nötige Seitennavigation auf.

Bei dieser Vorgehensweise müssen allerdings die Besonderheiten der Kommunikation zwischen Frames berücksichtigt werden. Ladezeitverzögerungen begegnet man z. B. mit einem setTimeout, der die Überprüfung periodisch aufruft. Die wesentliche Funktion, die in die Content-Dateien eingebunden wird, schaut folgendernaßen aus

  var loc =  0; 
  var cnt =  0;          
  function setSubNavi() {
    if (top.subnavi && top.subnavi.isLoad && top.subnavi.area == area) {
      // eventuelle Anweisung wenn Seitennavigation korrekt
    }
    else {
      if (!loc) { 			
        top.subnavi.location.replace (area + "_subnavi.html"); 
        loc =  1;
      }	
      if (cnt < 10) laden = setTimeout('setSubNavi(cnt++)',500);		
    }
  }

Im if-Zweig wird überprüft, ob der Frame subnavi vorhanden ist, ob die Datei vollständig geladen ist, und ob die area-Variablen übereinstimmen. Treffen diese Bedingungen zu, ist die korrekte Seitennavigation geladen, es könnte nun z. B. ein Status gesetzt werden.

Im else-Zweig gibt es eine weitere Abfrage der Variablen loc, die sicherstellt, daß die Datei der Seitennavigation nur einmal geladen wird. Der Name der Datei setzt sich aus der area und dem String _subnavi.html zusammen. Zur weiteren überprüfung wird die Funktion nach 500 Millisekunden durch die Window-Methode setTimeout erneut gerufen - sofern nicht das Maximum von 10 Versuchen erreicht ist.

Da eine Navigation auch ohne Javascript funktionieren sollte, kann in den Content-Dateien ein entsprechender Link im Noscript-Tag versteckt werden.

Beispiel ansehen
Beispiel downloaden