Frames und Javascript
Frames standen lange Zeit in der Diskussion. Zu viele Sites arbeiteten mit zu vielen Frames. Mittlerweile hat sich ein Kompromiß herauskristallisiert. Wenn überhaupt Frames notwendig sind, sollte sich eine Site in zwei, maximal drei dieser Rahmen aufteilen.
Frames eignen zum Beispiel als vorzügliche Navigationsgehilfen. Eine fest installierte Navigationsleiste am linken oder oberen Bildschirmrand führt den Surfer durch das Web-Angebot. In dieser Navigationsleiste sind Hyperlinks auf die Dokumente untergebracht. Ein Klick öffnet dann das HTML-File im zweiten, größeren Frame. Die Navigationsleiste bleibt dabei erhalten.
Pflicht für alle Frame-Designer ist: Externe Links müssen immer mit dem Parameter target="_top" versehen werden. Denn nur dann landen die fremden Webseiten im großen Browser-Fenster. Drängen Sie nicht dem Leser Ihre Benutzerführung auf, indem Sie eine externe Site in einen Frame laden.
Mit Bedacht eingesetzt, sind Frames also hübsch und brauchbar. Doch richtig Power erhalten die Seiteneinteilungen erst, wenn man ihnen mit Javascript zu Leibe rückt. Plötzlich entwickelt eine Homepage die Kraft, sich aus einem Framegerüst zu befreien oder auf Knopfdruck in mehreren Frames Dokumente zu wechseln.
Vorbereitungen
Um die folgenden Javascripts auszuprobieren, bereiten Sie ein Frameset und ein paar Dummy-Dateien vor. Das Frameset sieht grundsätzlich so aus:
<html>
<head>
<title>Frame-Beispiel
</title>
</head>
<frameset cols="20%,80%" border=10>
<frame src=dummy1.html>
<frameset rows="80,*" border=10>
<frame src=dummy2.html>
<frame src=autoload.html>
</frameset>
</frameset>
</html>
Anstelle des autoload.html in der dritten Fame-Definition setzen Sie jeweils den Namen des Javascript-Listings aus diesem Artikel und speichern das neue Set unter einem anderen Namen. Die Dummy-Dateien sehen so aus:
dummy1.html:
<html>
<head>
<title>Dummy 1</title>
</head>
<body bgcolor=yellow>
dummy1.html
</body>
</html>
dummy2.html:
<html>
<head>
<title>Dummy 2</title>
</head>
<body bgcolor=orange>
dummy2.html
</body>
</html>
Speichern Sie diese beiden Dateien im selben Verzeichnis wie Ihre Frame-Definition. Die mit bgcolor gesetzten Farben erleichtern das Unterscheiden der Rahmen.
Framekiller
Eine Unsitte im Web ist, daß manche Sites externe Links in einen Frame laden. Ihre Homepage erscheint dann als Bestandteil eines fremden Navigationskonzepts. Das sieht nicht gut aus und hinterläßt unter Umständen den Eindruck, Ihre Homepage wäre Bestandteil der aufrufenden Seite. Außerdem nimmt die Zwangsunterbringung in einem Frame Ihrer Site Platz und ist für den User lästig. Denn er sieht Ihre URL nicht und kann sich in Ihrem Angebot nur beschränkt bewegen.
Mit einem kleinen Skript prüfen Sie, ob Ihre Homepage in einen Frame steckt und laden sie bei Bedarf in das Hauptfenster des Browsers:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
<!-- //auskommentieren
if (top.frames.length != 0)
{ alert("Ich bin ein Frame");
top.location=location;
}
else
{ alert("Ich bin kein Frame");
}
-->
</script>
</head>
<body>
Testseite
</body>
</html>
Kernstück des Programms ist top.frames. Dieses Objekt erlaubt den Zugriff auf alle Frames eines Browser-Fensters. Die Eigenschaft length deutet an, wieviele Rahmen sich im aktuellen Browserfenster befinden. Wenn dieser Wert gleich 0 ist, sind auch keine Frames vorhanden. Ist die Anzahl ungleich 0, steckt die Datei in einem Frameset. Daraufhin meldet sich die Alert-Box mit "Ich bin ein Frame". Nach einem Ok lädt der Browser die aktuelle URL in das Hauptfenster. Dieses trägt die Bezeichnung top. Die Eigenschaft location beinhaltet die Web-Adresse des aktuellen Dokuments und übergibt sie an das Hauptfenster. Die ganz korrekte Ansprache der URL wäre location.href, da sich unterhalb von location auch noch weitere Bestandteile der Adreßzeile des Browsers ansprechen lassen. location.host zum Beispiel gibt nur die Internet-Adresse zurück ohne die genaue Pfadangabe zu einem Web-Dokument. Wenn man sich aber nur auf location bezieht, erhält man dasselbe Resultat wie mit location.href.
Für den Alltagseinsatz brauchen Sie die Alert-Boxen natürlich nicht. Auch ein else steht nicht zur Debatte. Das praxistaugliche Exemplar des Programms sieht dann so aus:
<script language="JavaScript">
<!-- //auskommentieren
if (top.frames.length != 0)
{ top.location=location;
}
-->
</script>
Mit diesen wenigen Zeilen rutscht Ihre Homepage automatisch auf die oberste Ebene einer Frame-Hierarchie. Übrigens zeigt parent.frames bereitwillig an, wieviele Frames in einem Browser-Fenster stecken, wenn man diese Zeilen programmiert:
<script language="JavaScript">
<!-- //auskommentieren
var alstring = "Es befinden sich " + top.frames.length + " Frames in diesem Browser-Fenster";
alert(alstring);
-->
</script>
Bei all der Freude über die frame-freie Homepage ansicht bleibt die Frage, ob man den User mit einer solchen Zwangsmaßnahme bevormunden soll oder ob man ihm lieber die Entscheidung überläßt, den Frame selbst auf die oberste Ebene zu hieven.
Rauf per Hyperlink
Eine Möglichkeit, dem Leser die freie Entscheidung zu überlassen ist ein Link, das nur dann auftaucht, wenn eine Seite in einem Frame steckt. Dazu packt man das Abfrage-Skript in den HTML-Body:
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="JavaScript">
<!-- //auskommentieren
if (top.frames.length != 0)
{ var adresse="<a href=" + location + " target=_top>Frame in das Top-Window laden</a><br>";
document.write(adresse);
}
-->
</script>
Hier geht die Seite weiter...
</body>
</html>
Wieder greift in diesem Listing die Abfrage nach der Anzahl der Frames. Abhängig davon bildet das Skript eine Zeichenkettenvariable mit der Adresse des eigenen Dokuments und schreibt sie mit document.write in das Browser-Fenster. Der Leser sieht dann den Hinweis "Frame in das Top-Window laden". Wenn er den Hyperlink anklickt lädt sich das Dokument selbst auf die oberste Ebene.
Hübscher ist natürlich eine kleine Grafik, die per Klick das Dokument auf die höchste Ebene lädt. Wer mag, versieht diese Grafik mit einem provozierenden Motto: "no frames". Die Variablenzuweisung für die grafische Version sieht dann so aus:
var adresse="<a href=" + location + " target=_top><img src=noframe.gif border=0 alt='Keine Frames'></a><br>";
Achten Sie darauf, die einfachen und doppelten Anführungszeichen korrekt zu setzen, sonst kommt das Programm durcheinander. Vergessen Sie auch nicht, innerhalb der Bilddefinition den alt-Parameter zu setzen. Dann bleibt zumindest dieser Text sichtbar, falls die Grafik aus irgendeinem Grund nicht zum Client gelangt.
Frameset nachladen
Nicht immer will man Frames zerstören. Es gibt auch den umgekehrten Fall: ein Dokument, das zu einem Frameset gehört, wird direkt aufgerufen. Was fehlt sind die umgebenden Frames mit wichtigen Navigationselementen oder Hinweisen.
Solche Pannen passieren etwa dann, wenn eine Suchmaschine auf ein HTML-File verzweigt. In diesem Fall sollte sich ein Skript darum kümmern, daß die passenden Frames mit in das Browser-Fenster kommen. Ein Weg wäre, wieder die Anzahl der Frames abzufragen und daraus die Konsequenzen zu ziehen:
<script language="JavaScript">
<!-- //auskommentieren
if (top.frames.length == 0)
{ alert("Lade Framset nach");
top.location="frameset.html";
}
-->
</script>
Diese Methode hat einen kleinen Nachteil: Wenn das Dokument in ein beliebiges anderes Frameset eingebettet wird, greift die Abfrage nicht. Denn es sind ja mehr als 0 Frames vorhanden. Dennoch erweist sich diese Abfragemethode in manchen Fällen als sinnvoll. Das ist etwa dann der Fall, wenn man die Anzahl von Frames generell begrenzen will oder beim Überschreiten einer Obergrenze ein neues Frameset laden möchte. Aber eleganter und in diesem Fall zweckmäßiger ist es, abzufragen, ob ein Frame mit einem bestimmten Namen vorkommt:
<script language="JavaScript">
<!-- //auskommentieren
if (!top.frames.navigation)
{ alert("Frame 'Navigation' nicht vorhanden");
top.location="frameset.html";
}
-->
</script>
Hier sucht das Programm nach dem Frame namens "Navigation". Wird es nicht fündig, lädt es das Frameset nach. In diesem Frameset wiederum ist die Datei selbst auch enthalten. Zuständig für die Abfrage ist das !top.frames.navigation im If-Konstrukt. ! steht für das Boolesche NOT. Im Klartext heißt die Bedingung also: Das Ergebnis ist WAHR, wenn es nicht top.frames.navigation gibt.
Doch auch dieses Verfahren hat einen Haken: Denn was geschieht, wenn im aufrufenden Frameset von der fremden Site zufällig auch ein Rahmen namens "Navigation" vorkommt? Dann greift das Skript auch nicht. Ein Weg, dieses Problem zu umgehen, wären möglichst kryptische Namen für die Frames, etwa "x1zzafgy". Aber das wird unübersichtlich.
Ein Weg: bei umfangreicheren Framesets erweitern Sie die Abfragebedingungen:
<script language="JavaScript">
<!-- //auskommentieren
if (!top.frames.navigation || !top.frames.inhalt)
{ alert("Frames 'Navigation' oder 'Inhalt' nicht vorhanden");
top.location="frameset.html";
}
-->
</script>
Nun greift das Skript, sobald einer der beiden wichtgen Frames "Navigation" oder "Inhalt" nicht vorhanden ist und lädt das entsprechende Frameset. Wenn Sie nun nicht gerade Allerweltsnamen für Ihre Frames vergeben, dürfte dieses Verfahren sicher funktionieren.
Frames tauschen
Ein recht witziges Beispiel für das Frame-Handling mit Javascript ist das folgende Listing. Es tauscht einfach die Inhalte zweier Frames aus. Dabei bezieht sich das Programm auf das eingangs programmierte Frameset. Anstelle der letzten Frame-Definition "autoload.html" fügen Sie bitte den Dateinamen dieser HTML-Datei ein, zum Beispiel tausch.html:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
if (top.frames.length >=3)
{ alert("Ich tausche...");
var fr0=top.frames[0].location;
var fr1=top.frames[1].location;
top.frames[0].location=fr1;
top.frames.dummy2.location=fr0;
}
</script>
</head>
<body>
Testseite
</body>
</html>
Das Skript prüft zunächst, ob mindestens drei Frames vorhanden sind: Zwei zum Tauschen, einer für das HTML-Dokument mit dem Skript. Achten Sie unbedingt darauf, dieses Dokument in den dritten Frame zu laden. Ansonsten tauscht sich das Javascript-Dokument immer wieder selbst. Und bei jedem Wechsel startet das Programm von Neuem. Das Ergebnis wäre eine Endlossschleife.
Sind drei oder mehr Frames vorhanden, liest das Programm die URLs der beiden Frames 0 und 1 aus. Diese übergibt es an die beiden Variablen fr0 und fr1. Das ist zwar etwas umständlich, macht das Programm aber übersichtlicher. In den folgenden Zeilen übernehmen die Objekte parent.frames[0] und parent.frames[1] die Inhalte der Variablen wieder in ihre Eigenschaft location, laden also den jeweils anderen Frame. Damit Sie den Effekt mitverfolgen können, hält zuvor eine Alert-Box das Programm an und wartet auf Ihr OK, bis es tauscht.
Dieses Demo zeigt, wie sich abhängig vom Laden eines Dokuments Frames manipulieren lassen. So ließe es sich beispielsweise einrichten, daß ein Dokument gleich die passenden Partnerdokumente mit in einen Frame lädt, ohne daß man hierfür umständlich ein neues Frameset aufrufen muß.
Wie spreche ich mit meinem Frame?
Frames lassen sich mit zwei Verfahren ansprechen: Sie sind einerseits aufsteigend von 0 durchnumeriert, entsprechend der Reihenfolge, in der sie das Frameset definiert. Andererseits hören die Frame-Objekte auch auf ihren Namen, sofern diese in der Definiton mit angegeben wurden:
<frame src="dummy2.html" name="dummy2">
Entsprechend nennt das Javascript nun den Rahmen beim Namen:
top.frames.dummy2.location=fr0;
Generell sind die durchnumerierten Frames flexibler in der Programmierung, aber schwieriger zu handhaben. Denn hier muß man genau darauf achten, nicht mit den Ziffern durcheinanderzukommen. Die Namen hingegen nehmen dem Skript an Flexibilität -- man kann es nicht einfach kopieren und in einem anderen Frameset einsetzen. Aber dafür entlohnt es mit mehr Überblick beim Programmieren.
Mehr dazu:
frame_sources.zip