Modul 3.3: Neue Möglichkeiten mit inline frames (iframes)

Allgemeines:

Inline-Frames (oder auch eingebettete Frames genannt) sind eine Neuerung der Version 4 unserer Seitenbeschreibungssprache html und laufen nur in Browsern neuerer Version (ab Microsoft Internet-Explorer 5 bzw. Netscape Navigator 6). Man kann jedoch für ältere Browser relativ leicht eine Alternative angeben.

Wenn Ihnen normale Frames zu komplex erscheinen, sind Inline-Frames vielleicht für Sie das Richtige. Auch für alle Fortgeschrittenen, die gerne Server-Side-Includes (SSI, zu erkennen z.B. an Fileendungen wie .ssi, .php oder .asp; vergleiche Kursteil B) einbauen würden, aber keine entsprechenden Rechte am Server haben, ist dies eine äußerst interessante Alternative. Näheres besprechen wir im Kursteil B.

Inline-Frames sind Rahmenfenster, die Sie auf einer normalen html-Seite ähnlich wie z.B. ein Bild platzieren können. In diesen Inline-Rahmen können dann andere html-Seiten eingeladen werden. Sie können mehrere inline-Rahmen auf einer html-Seite platzieren.

html-Syntax von inline frames

Am ehesten können Sie einen iframe mit dem Einbau eines Bildes auf einer Seite vergleichen. In beiden Fällen werden andere Dateien eingeladen, in einem Fall eine Bilddatei, im iframe-Fall eine andere html-Datei. Vergleichen Sie die Abbildungen.

Die html-Syntax ist entsprechend ähnlich:

• für den Bildeinbau: <img width="pixel" height="pixel" src="pfad/bilddatei.jpg"> Weitere Attribute für Rand (border="0/2/3") oder Ausrichtung (align="left/right") können angegeben werden.
  
  

• für den Iframe-Einbau sehr analog: <iframe width="pixel" height="pixel" src="pfad/htmldatei.html">. Weitere Attribute können wie oben angegeben werden, z.B. <iframe frameborder="0" name="hallo" width="400" height="200" scrolling="yes/no" src="test.html">
  
  

• Wenn Sie den iframe zentrieren wollen, umschließen Sie ihn mit einem zentrierten Paragraphen-Tag <p align="center"><iframe ...... </iframe></p> oder einem zentrierten Divider Tag <div align="center"><iframe ...... </iframe></div>
  (Veraltet ginge auch <center><iframe ...... </iframe></center>, aber das alleinstehende center-Tag ist in html4 nicht mehr zulässig und wird von zukünftigen Browsern wohl bald nicht mehr unterstützt werden; übrigens ziemliche Katastrofe, wenn ich da an meine früher geschriebenen Webangebote denke, die werden irgendwann alle ganz schrecklich unformatiert aussehen, wenn ich das nicht alles zunehmend umbaue)

Schauen Sie sich hierzu mal ein Beispiel an.

• Wichtig ist die Angabe eines Framenamens (siehe oben), wenn Sie z.B. mehrere iframes in eine Seite eingebaut haben und diese auch untereinander angesteuert werden sollen
  (vgl. dieses Beispiel)
  
  

• Der Einbau des iframe-Tags kann ohne weiteres im body des Dokuments erfolgen, also auch hier die Analogie zum Bildeinbau.
  
  

Möglichkeiten und Einschränkungen

Auch auf dieser Seite habe ich nachfolgend einen iframe eingebaut, den wir gleich für folgende Links nutzen wollen:

1. Mögliche Anwendungen für iframes
2. Möglichkeiten zur Berücksichtigung älterer Browser
3. Kann ich mir bei der iframe-Erstellung helfen lassen?
4. Was sind die grundsätzlichen Unterschiede zwischen Frames und iframes?

Inhaltliches Anwendungsbeispiel von iframes

Im Nachfolgenden ein kleiner Geobiologie-Test als Anwendungsbeispiel mittels zweier iframes:

>> zu Modul 4 (Optik, Inhalte und Navigation)

<< Modul 3.2: Übungsbeispiele Frames und iFrames

<< Modul 3.1.4