Eingebettete Frames

Eingebettete Frames

Eingebettete Frames (auch als Inline-Frames bezeichnet) ermöglichen es, an einer gewünschten Stelle innerhalb des sichtbaren Inhalts eines HTML-Dokuments Inhalte aus anderen Dateien oder Quellen einzubinden. Dazu stellt HTML das iframe-Element zur Verfügung (iframe = inline frame). Wie der Name schon vermuten lässt, hat dieses Element Inline-Charakter, d.h., es kann - ähnlich wie Grafikreferenzen - auch mitten im Text notiert werden.

Zum reinen Einbetten einer anderen Quelle kann übrigens auch das

object-Element verwendet werden, das im Gegensatz zum iframe-Element zum strict-Standard von HTML gehört. Bei Verwendung des iframe-Elements müssen Sie dagegen den Dokumenttyp für die HTML-Variante transitional angeben. Erforderlich ist die Verwendung des iframe-Elements jedoch dann, wenn Hyperlinks ihr Verweisziel im Fenster des Inline-Frames öffnen sollen. Genau diesen Anwendungsfall werden wir im nachfolgenden Beispiel behandeln.

Der Quelltext der Datei mit dem eingebetteten Frame lautet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Eingebetteter Frame</title>
</head>
<body style="text-align:center">
<h1>Blindtext</h1>
<p>
<a href="seite1.htm" target="content">Seite 1</a> |
<a href="seite2.htm" target="content">Seite 2</a> |
<a href="seite3.htm" target="content">Seite 3</a> |
<a href="seite4.htm" target="content">Seite 4</a>
</p> 
<p>
<iframe name="content" src="seite1.htm"
frameborder="0"
style="width:60%;
height:200px;
border:thin solid #C0C0C0">
Ihr Browser unterstützt leider keine eingebetteten Frames!
</iframe>
</p>
</body>
</html>

eingebettete_frames_01

eingebettete_frames_02

Info

Das iframe-Element wird mit Start- und End-Tag notiert. Zwischen <iframe> und </iframe> kann Inhalt für Browser notiert werden, die das iframe-Element nicht kennen oder interpretieren. Dabei dürfen auch beliebige Block- und Inline-Elemente notiert werden.

Wie beim frame-Element wird auch beim iframe-Element eine Default-Quelle über das src-Attribut referenziert. Es kann sich um einen beliebigen URI handeln, also um eine lokal referenzierte Datei oder auch um eine absolute Internetadresse. Wie auch beim frame-Element ist das name-Attribut wichtig, wenn Linkziele im eingebetteten Frame geöffnet werden sollen.

Weitere Angaben zum Frame-Fenster wie Breite und Höhe

des Frame-Fensters werden im obigen Beispiel zeitgemäß über CSS gelöst. Die Angabe width:60% im Beispiel bedeutet: 60% der Breite des Elternelements. Dieses ist das umgebende p-Element, welches sich im normalen Textfluss innerhalb des body-Elements befindet. Da es ein Block-Element ist, nimmt es die maximal verfügbare Breite ein, also die gesamte Breite des Anzeigefensters abzüglich der Default-Ränder, die der Browser setzt.

Mithilfe von CSS lässt sich auch der Rahmen des eingebetteten Frames optimal gestalten. Im Beispiel haben wir einen dünnen grauen Rahmen (border:thin solid #C0C0C0) gewählt. Dennoch ist zusätzlich das HTML-Attribut frameborder="0" notiert. Damit wird explizit der Frame-eigene Rahmen unterdrückt, den der Internet Explorer andernfalls unabhängig von der CSS-Rahmendefinition anzeigt.

Die Links im Beispiel haben im einleitenden <a>-Tag ein Attribut target="content". Dadurch wird der Fensterbezug zum iframe-Element hergestellt, das mit name="content" definiert wird. Die Verweisziele werden im Frame-Fenster geöffnet. Scrollleisten zeigt der Browser nach Bedarf an. Durch scrolling="no" können Sie die Anzeige von Scrollleisten verhindern.