Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 10 Frames und Iframes
|  | 10.1 Mit Frames arbeiten
|  |  | 10.1.1 Frames mit HTML
|  |  | 10.1.2 Frames mit JavaScript füllen
|  | 10.2 Auf Daten von Frames zugreifen
|  |  | 10.2.1 Auf übergeordnete Frames zugreifen
|  |  | 10.2.2 Auf Daten von Unterframes zugreifen
|  |  | 10.2.3 Mehrere Frames gleichzeitig ändern
|  |  | 10.2.4 JavaScript in Frames auslagern
|  |  | 10.2.5 Frames zählen
|  | 10.3 Diashow
|  |  | 10.3.1 Vorbereitungen
|  |  | 10.3.2 Diashow starten
|  |  | 10.3.3 Diashow anhalten
|  |  | 10.3.4 Vorwärts und rückwärts springen
|  |  | 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. ## 10.1 Mit Frames arbeiten 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. ### 10.1.1 Frames mit HTML Eine Frame-Struktur wird immer mit dem HTML-Tag <frameset> eingeleitet. Es wird genau einer der beiden folgenden Parameter erwartet:
| rows: Die einzelnen Frames werden untereinander (in Zeilen, engl. rows) angeordnet.
| 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:
| Angabe in Pixeln: Lediglich der numerische Wert wird angegeben.
| Angabe in Prozent der Gesamthöhe/-breite des Fensters, das das <frameset> enthält.
| »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:
| <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.
| <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>
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. ### 10.1.2 Frames mit JavaScript füllen 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>
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 | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de