Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 10 Frames und Iframes
  gp 10.1 Mit Frames arbeiten
    gp 10.1.1 Frames mit HTML
    gp 10.1.2 Frames mit JavaScript füllen
  gp 10.2 Auf Daten von Frames zugreifen
    gp 10.2.1 Auf übergeordnete Frames zugreifen
    gp 10.2.2 Auf Daten von Unterframes zugreifen
    gp 10.2.3 Mehrere Frames gleichzeitig ändern
    gp 10.2.4 JavaScript in Frames auslagern
    gp 10.2.5 Frames zählen
  gp 10.3 Diashow
    gp 10.3.1 Vorbereitungen
    gp 10.3.2 Diashow starten
    gp 10.3.3 Diashow anhalten
    gp 10.3.4 Vorwärts und rückwärts springen
    gp 10.3.5 Diashow verlassen

Fensterln: nachts zu einem Mädchen ans Fenster gehen [und durchs Fenster zu ihm ins Zimmer klettern] – DUDEN in acht Bänden

Kapitel 10 Frames und Iframes

Das window-Objekt steht in der Objekthierarchie ganz oben. Dies ist verständlich, da alles, was man mit JavaScript anstellen kann, in irgendeiner Art von Fenster dargestellt wird. Wenn also eine Webseite aus mehreren Frames besteht, wird jeder dieser Frames wie ein Fenster behandelt, zumindest im Sinne von JavaScript. Sie sehen, es gibt viele verschiedene Anwendungen für dieses Objekt. Aus diesem Grund wird das Thema in drei Kapiteln behandelt.

In diesem Kapitel werden Sie erfahren, wie man mit JavaScript auf Frames zugreift und damit beispielsweise die Navigation flexibler gestalten kann. Außerdem wird Schritt für Schritt eine der JavaScript-Standard-anwendungen implementiert: eine Warenkorb-Lösung.


Rheinwerk Computing

10.1 Mit Frames arbeiten  downtop

Unter einem Frame versteht man einen Bereich im Browserfenster, der – genau wie das Browserfenster selbst – einen eigenen Scroll-Balken haben und unabhängig vom Rest der Webseite gescrollt werden kann. Frames tauchten das erste Mal im Netscape Navigator 2 auf und wurden sehr schnell von Webdesignern übernommen, erlaubten Frames doch eine bequeme Navigation. Viele Seiten bestanden zunächst aus zwei Frames: Der eine enthielt die Navigationspunkte, der zweite die eigentlichen Inhalte der Seite. Da sich die Navigation in dem Frame befand, musste sie nicht in die Seiten mit dem eigentlichen Inhalt mit eingeschlossen werden, was den Verwaltungsaufwand bei Änderungen verringerte (nur die Seite mit der Navigation musste angepasst werden, jedoch nicht jede einzelne Inhaltsseite). Der Internet Explorer übernahm Frames in der Version 3, und schon begannen die Webdesigner zu fluchen, da die Implementierung von Frames leicht unterschiedlich war (Stichwort: Abstand des Frame-Inhalts vom Frame-Rand). Mittlerweile geht der Trend wieder zu Seiten ohne Frames, auch in Hinblick auf Handhelds, deren eingeschränkte Browser oft mit Frames nichts anfangen können. Dennoch können Sie in Verbindung mit JavaScript mit Frames erstaunliche Dinge machen – Dinge, die ohne Frames nur mit Schwierigkeiten oder gar nicht realisiert werden könnten.

In Mode kommt allerdings eine spezielle Form von Frames, so genannte Iframes (in HTML: <iframe>-Element). Das sind Frames, die inmitten einer Seite liegen. Das gestattet beispielsweise, immer nur einen Teilbereich einer Seite zu aktualisieren, also ohne komplettes Neuladen einer Seite. Auch hier gilt wieder, dass Textbrowser und mobile Endgeräte Schwierigkeiten haben. Generell aber sind Iframes ein Spezialfall von Frames und werden deswegen nicht gesondert behandelt; die JavaScript-Ansteuerung ist identisch. Wenn im Folgenden von »Frames« die Rede ist, sind – wenn es um die Ansteuerung geht – immer auch Iframes gemeint.

Mit JavaScript ist es möglich, von einem Frame aus Methoden, Eigenschaften und Variablen eines anderen Frames aufzurufen. Im Folgenden erfahren Sie zunächst etwas über den strukturellen Aufbau von Frames, und dann, wie diese Strukturen in JavaScript nachgebildet worden sind.


Rheinwerk Computing

10.1.1 Frames mit HTML  downtop

Eine Frame-Struktur wird immer mit dem HTML-Tag <frameset> eingeleitet. Es wird genau einer der beiden folgenden Parameter erwartet:

gp  rows: Die einzelnen Frames werden untereinander (in Zeilen, engl. rows) angeordnet.
gp  cols: Die einzelnen Frames werden nebeneinander (in Spalten, engl. columns) angeordnet.

Als Wert für diesen Parameter werden – durch Kommata getrennt – die Höhen (bei rows) oder Breiten (bei cols) der einzelnen Frames erwartet. Dabei haben Sie die Wahl zwischen drei Optionen:

gp  Angabe in Pixeln: Lediglich der numerische Wert wird angegeben.
gp  Angabe in Prozent der Gesamthöhe/-breite des Fensters, das das <frameset> enthält.
gp  »Rest«: Wird durch einen Stern (*) symbolisiert.

Diese Möglichkeiten können natürlich miteinander kombiniert werden. Da dieses Buch keine HTML-Einführung sein soll, folgen hier nur ein paar kurze Beispiele:

gp  <frameset rows="100,200,300">: Drei Frames, die untereinander angeordnet sind. Im Idealfall hat der oberste Frame eine Höhe von 100 Pixeln, der mittlere eine Höhe von 200 Pixeln und der untere eine Höhe von 300 Pixeln. Das ist deswegen ein Idealfall, da das Browserfenster wahrscheinlich nicht exakt 600 Pixel hoch ist.
gp  <frameset cols="100,50  %,*">: Drei Frames, die nebeneinander angeordnet sind. Der mittlere nimmt die halbe Breite ein, der linke ist exakt 100 Pixel breit, und der dritte Frame beansprucht die restliche Breite für sich. Sollte sich also die Breite des Browserfensters verändern, ändern gleichzeitig auch der mittlere und der rechte Frame ihre Breite, der linke Frame bleibt jedoch in der Größe konstant.

Mit <frameset> wird also die Frame-Struktur festgelegt – über die individuellen Inhalte der Frames wurde damit noch nichts ausgesagt. Hierfür ist das <frame>-Tag zuständig, das in seinem src-Attribut die URL des Dokuments enthält, das in dem entsprechenden Frame dargestellt werden soll.

Für jeden Frame muss – innerhalb der frameset-Struktur – entweder ein <frame>-Tag verwendet werden oder ein weiteres <frameset>-Tag. So können auch mehrere Framesets ineinander verschachtelt werden. In den nächsten Abschnitten wird die folgende Frame-Struktur als Vorbild verwendet:

<html>
<head><title>Frames</title></head>
<frameset cols="150,*">
  <frame name="A" src="a.html">
  <frameset rows="100,*">
    <frame name="B" src="b.html" />
    <frame name="C" src="c.html" />
  </frameset>
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!
</body>
</noframes>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 10.1     Die Beispielseite im Browser

Zur Erläuterung: Das Browserfenster wird zunächst vertikal in zwei Bereiche geteilt: Der linke Bereich wird mit der Datei a.html gefüllt, der rechte wird horizontal in zwei Frames geteilt, wovon der obere die Datei b.html und der untere die Datei c.html enthält. In Abbildung 8.1 sehen Sie, wie das Ganze im Browser aussieht.


Rheinwerk Computing

10.1.2 Frames mit JavaScript füllen  toptop

Kleines Quiz: Wie bekommt man eine leere Seite in einen Frame? Netscape-Veteranen erinnern sich vielleicht an die Abkürzung about:blank, die seit Version 1 eine leere Seite erzeugt. Mittlerweile haben sich alle anderen Browser daran orientiert und unterstützen about:blank ebenfalls.

Mit JavaScript ist es jedoch möglich, den Startinhalt eines Frames direkt in der Seite mit dem Frameset festzulegen. Das ist eigentlich gar nichts Neues. Sie wissen ja schon längst, wie man eine JavaScript-Funktion via URL aufrufen kann: mit dem JavaScript-Protokoll. Ganz nebenbei kann man damit auch noch andere Dinge erzeugen als eine leere Seite. Betrachten Sie folgendes Beispiel:

<html>
<head><title>Frames</title>
<script type="text/javascript"><!--
function tag(s) {
  return "<" + s + ">";
}
function leer() {
  var html = tag("html") + tag("body") + tag("/body")
  + tag("/html");
  return html;
}
function voll(s) {
  var html = tag("html") + tag("body");
  html += tag("h3") + s + tag("/h3");
  html += tag("/body") + tag("/html");
  return html;
}
//--></script>
</head>
<frameset cols="150,*">
   <frame name="A" src="javascript:top.voll('linker
   Frame')" />
   <frameset rows="100,*">
      <frame name="B" src="javascript:top.leer()" />
      <frame name="C" src="javascript:top.voll('rechts
      unten')" />
   </frameset>
</frameset>
<noframes>
<body>Ihr Browser kann mit Frames nichts anfangen!</body>
</noframes>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 10.2     Mit JavaScript gefüllte Frames

Im Browser sieht diese Seite dann so ähnlich wie in Abbildung 10.2 aus, vorausgesetzt natürlich, Ihr Browser unterstützt JavaScript! Was übrigens das top. vor dem Funktionsnamen bedeutet, erfahren Sie ein paar Abschnitte später.

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern