Informatik :: JavaScript :: Mehrere Frames auf einmal laden

Mehrere Frames auf einmal laden

Die meisten Seiten sind inhaltsmäßig in mindestens 3 Ebenen strukturiert.

Beispiel:

Das Inhaltsverzeichnis der Hauptthemen soll immer zu sehen und verfügbar sein. Man benötigt also zunächst ein Frameset mit 2 Frames. In einem wird das Inhaltsverzeichnis der Hauptthemen (main.html) und in den anderen die Willkommensseite (home.html) geladen.

Das Inhaltsverzeichnis der Hauptthemen enthält 3 Links (Thema A, B, C). Bei Auswahl eines Hauptthemas soll das Inhaltverzeichnis des Themas und eine Einführungsseite zum Thema geladen werden.
Es müssen also jeweils 2 Frames gleichzeitig geladen werden.
Das Inhaltsverzeichnis zum jeweiligen Thema enthält wiederum Links (Thema 1, 2, 3, ...), die entsprechende Seiten referenzieren.

Das Objekt frames[#]

Es stellt Methoden und Eigenschaften zur Verfügung, über die Frames angesprochen und verändert werden können.
Eine Kurzreferenz des frames[#]-Objektes findest du in der Objektreferenz.
Die Frames werden mittels Indexnummer durchnummeriert, so wie sie im HTML-Code erzeugt werden. frames[2] steht z.B. für den 3. Frame der Seite.
Das Besondere am frames[#]-Objekt ist, dass es fast identisch mit dem window-Objekt ist. Somit kann man alle Methoden und Eigenschaften des window-Objektes auf das Frame-Objekt anwenden. Eine Kurzreferenz des window-Objektes steht in der Objektreferenz zur Verfügung.
Um einen Frame anzusprechen ist stets das Objekt parent nötig. parent spricht das im Basisfenster angezeigte Fenster an (so genanntes Elternteil). parent.frames[1].name ermittelt z.B. den Namen des 2. Frames.

Um nun eine Datei zu laden, benötigt man nur noch das Objekt location mit der Eigenschaft href.

Beispiele:

    window.location.href="home.html" //lädt die Datei home.html ins Browserfenster
    parent.frames[1].location.href="start.html" //lädt die Datei start.html in den 2. Frame.

Aufgabe 1:

Erzeuge die oben im Beispiel dargestellte Struktur!

Hinweise:

  1. Zuerst brauchen wir die Startdatei index.html, die das Fenster in 3 Frames (2 Zeilen und die untere Zeile in 2 Spalten) einteilt.
    In den oberen Frame soll das Inhaltsverzeichnis (die Datei menu.html), in den linken Frame zunächst eine Datei, die "leer" ist (leer.html), und in den rechten Frame die Willkommensseite (home.html) geladen werden.
    Der rechte Frame muss auch einen Namen z.B. rechts bekommen, weil er ja für mehrere Dateien zur Verfügung stehen soll.

  2. Erstellen der 3 HTML Dateien:
    • leer.html: leerer BODY
    • home.html: Überschrift "Herzlich Willkommen!"
    • menu.html:
      3 Verweise (Thema A, B, C) mit Aufruf einer Funktion, nennen wir sie zweiframes() und je einer Grafik - gruen.gif

      Die Funktion zweiframes() soll sowohl in den linken als auch in den rechten Frame jeweils eine Datei laden. Dazu müssen der Funktion beim Aufruf 2 Parameter übergeben werden, nämlich die URL bzw Dateinamen der beiden Dateien. Also:

      function zweiframes(datei1,datei2)
      {
        parent.frames[1].location.href = datei1;
        parent.frames[2].location.href = datei2;
      }

      Der Aufruf erfolgt dann z.B. im Verweis Thema A durch:

      <a href="javascript:zweiframes('inhalta.html','maina.html')">Thema A

      Analog geht man mit den beiden anderen Verweisen (Thema B bzw. Thema C) vor

  3. Je 2 Dateien für jeden Verweis des Inhaltsverzeichnisses (menu.html):
    • inhalta.html, inhaltb.html und inhaltc.html:
      Sie enthalten jeweils das Inhaltverzeichnis (Verweise) des entsprechenden Hauptthemas A, B und C mit jeweils einem grünen Kreis (siehe 2.)
      Die Verweise referenzieren die Dateien a1.html bis a5.html, b1.html bis b3.html und c1.html bis c4.html, die jeweils in den rechten Frame geladen werden sollen.
      Also z.B.:

      <a href="a1.html" target="rechts">Thema 1

    • maina.html, maina.html und maina.html:
      Sie enthalten jeweils eine Überschrift mit dem jeweiligen Hauptthema und den Text "Einführungsseite".

  4. a1.html bis a5.html, b1.html bis b3.html und c1.html bis c4.html:
    Sie enthalten als Hauptüberschrift das entsprechende Hauptthema (Thema A, B bzw. C) und als weitere Überschrift das jeweilige Unterthema (Thema 1, 2, ...).

Aufgabe 2:

Ergänze alle Inhaltsverzeichnisse durch den Bilderwechsel aus Aufgabe 2 der Anwendung "Bilder interaktiv wechseln", so dass obiges Beispiel realisiert wird!