Unsichtbare Frames sind nützliche Helfer im Web.
Inlineframes (kurz: IFrames) sind eine einfache Methode, um die Kommunikation zwischen Browser und Webserver effektiv abzuwickeln. Mit der HTML 4.0-Spezifikation eingeführt und auch in XHTML 1.0 weiterhin unterstützt, werden Inlineframes inzwischen von fast allen Web-Browsern unterstützt.
Inlineframes sind eingebettete, unsichtbare Frames
IFrames sind in einer HTML-Datei eingebettete, herkömmliche Frames, die für den Nutzer nicht sichtbar sind, es aber ermöglichen, Webinhalte als selbstständige Dokumente in einem Unterfenster des Browsers anzuzeigen.
Grundsätzlich gibt es zwei Arten von IFrames: Es gibt zum einen die Möglichkeit, den IFrame als iframe-Tag direkt in die HTML-Seite einzubinden und mit ihr zu laden: src=“inline.html“ name=“iframe_fenster“ width=“500″ height=“400″ (unten gibt es dazu das vollständige Beispiel als Screenshot).
Laden des IFrames mit JavaScript
Zum anderen können IFrames auch dynamisch über DOM und JavaScript erzeugt werden, nachdem die Seite geladen wurde (vollständiger Code als Screenshot unten):
function add_iframe() {iframe = document.createElement(‚iframe‘);iframe.src = „test3.html“;iframe.width = 500;iframe.height = 400;document.body.appendChild(iframe);}
Gestaltung von IFrames
IFrames werden gestaltet, indem man ihnen eine absolute Größe (in Pixeln) oder eine relative Größe im Verhältnis des Browser-Fensters zuweist. Mit Verweisen lässt sich auch der Inhalt des eingebetteten Frames ändern. Voraussetzung für Verweise zu einem eingebetteten Frame ist, dass der eingebettete Frame mit name eindeutig benannt ist. Damit das Verweisziel in dem Frame angezeigt wird, wird im einleitenden Verweis-Tag zusätzlich die Angabe target notiert. Dahinter folgt der Name des Frame-Fensters, in dem das Verweisziel angezeigt werden soll.
Vorteile der IFrames
Ein IFrame erlaubt das parallele Laden der Inhalte, sodass die umgebende Webseite schon dargestellt werden kann, während der Inhalt des IFrames noch geladen wird. Die Anwendung ist also während der Anfrage nicht wie bei klassischen Webapplikationen blockiert.
Sicherheitsrisiko
Allerdings soll nicht verschwiegen werden, dass IFrames ein gravierendes Sicherheitsrisiko darstellen, wenn sie für die Darstellung von Inhalten verwendet werden: Der Nutzer kann nicht mehr erkennen, wann er das Inhaltsangebot der ursprünglichen Webseite verlässt und eine andere aufruft. Wenn zusätzlich über JavaScript die Größe des Inlineframes an den aktuellen Inhalt angepasst wird, kann der Nutzer nicht einmal mehr erkennen, dass überhaupt ein IFrame eingesetzt wird.
Einbettung mit iframe-Tag
Es folgt ein Beispiel zur Einbettung von IFrames mittels iframe-Tag (unten der Screenshot zum Code):
src=“inline.html“ id=“fenster1″ name=“iframe_fenster“ width=“500″ height=“400″>
Ihr Browser unterstützt keine IFrames
Die IFrame-Seite wird mit dem src-Attribut angegeben. Der Quellcode der im obigen Beispiel angegebener Webseite inline.html sieht dann folgendermaßen aus (die Darstellung des IFrames findet sich unten):
<….>
…Dies ist der Inhalt des IFrames!
Überblick zur Funktionalität von IFrames
Das IFrame kann dazu verwendet werden, die Funktionalität vom XMLHttpRequest und somit Ajax nachzubilden. Hierzu einige Argumente:
- Ein IFrame wird vom Browser parallel ausgeführt und blockiert das Hauptfenster des Client nicht, solange sein Inhalt geladen wird.
- Der iframe-Tag kann – wie viele andere HTML-Tags – mit Event-Handlern versehen werden. Der Event-Handler „onload“ wird ausgelöst, sobald die IFrame-Seite komplett geladen ist. Somit ist der Client fähig, auf einen HTTP-Response des Servers zu reagieren.
- Mittels JavaScript kann der Inhalt des IFrames manipuliert und ausgelesen werden. Das Schreiben wird mit der JavaScript-Funktion „framename.document.writeln()“ bewerkstelligt. Das Lesen des IFrames erfolgt über „framename.document.body.innerHTML“.
- Es ist möglich, dem DOM-Baum beliebig viele IFrames hinzuzufügen und damit beliebig viele parallele Übertragungsvorgänge zu realisieren.
- Auf IFrames kann mit dem target-Attribut verwiesen werden. Dieses Attribut findet Verwendung in Hyperlinks (a) und Formularen (form). Damit kann der Browser angewiesen werden, einen Übertragungsvorgang zu starten, ohne JavaScript einzubeziehen.
Trick: IFrames ohne JavaScript
Für den Dateiupload im Internet besonders interessant ist die zuletzt erwähnte Möglichkeit, ohne JavaScript als Zwischenschritt eine parallele Übertragung zu starten. Hierzu wird ein unsichtbares IFrame (z.B.: width = 0 und height = 0) erstellt. Die Daten des Formulars werden an das IFrame geleitet. Der Server liefert die Antwort in das gleiche IFrame, was wiederum mit JavaScript ausgelesen werden kann (nicht im folgenden Beispiel enthalten). Aus technischen Gründen wurde das die Tags einleitende „<“ weggelassen:
form action=“upload.php“ method=“post“ enctype=“multipart/form-data“ target=“iframe_fenster“>
Wähle ein Bild aus:
form action=“upload.php“ method=“post“ enctype=“multipart/form-data“ target=“iframe_fenster“>
Wähle ein Bild aus:
input type=“file“ name=“datei“ />
input type=“submit“ value=“Hochladen!“ />
/form>
iframe src=“test2.html“ name=“iframe_fenster“ width=“0″ height=“0″> …
In obigem Beispiel verweist das Attribut „target“ des HTML-Formulars auf den unsichtbaren IFrame. Sobald das Formular im Hauptfenster gesendet wird, leitet der Browser die Übertragung an das IFrame-Fenster. Dieses überträgt die Formulardaten (hier: das hochzuladende Bild), ohne das Hauptfenster zu blockieren.
Probleme mit IFrames
Eigentlich ist eine solche Vorgehensweise also ein Hack, denn die Funktionalität ist ursprünglich nicht für unsichtbare, sondern für die Darstellung sichtbarer Inhalte gedacht.
Dies könnte bedeuten, dass bestimmte Browser IFrames als Informationsträger interpretieren, sodass das Verhalten solcher IFrames (z.B. Breite/Höhe gleich „0“) nicht mehr definiert ist. Dies ist z.B. bei Safari bereits der Fall bei IFrames, die über CSS mit „display:none“ unsichtbar gestaltet wurden.
Eine weitere Eigenschaft asynchroner Übertragungen stellt auch bei IFrames ein gravierende Problem dar: Der Übermittlungsprozess wird abgebrochen, wenn der Nutzer währenddessen einen synchronen Vorgang auslöst.
Die IFrame-Methodik eignet sich aber trotzdem zum Beispiel dafür, den Upload von Bildern zu implementieren, der ja mit dem populären Ajax aufgrund der Sandbox-Problematik nicht abgewickelt werden kann.