CSS, HTML und Javascript mit {stil}

HTML iframe • Fenster in ein anderes Dokument

HTML blockquote

HTML iframe fügt innerhalb von body ein inline-Fenster in ein anderes Dokument ein. Der Browser rendert eine weitere HTML-Datei innerhalb der Webseite.

iframe zeigen beliebige Inhalte – Formulare, Bilder, Multimedia, Tabellen usw.. YouTube und Vimeo liefern ihre Videos in iframe aus.

Der Inhalt des iframes-Fensters kann unabhängig vom HTML-Dokument formatiert werden. Zudem kann das Original-Dokument schon angezeigt werden, während das iframe noch geladen wird. In iframes wird darum gern Werbung dargestellt. Sie rühren nicht an das Layout der Seite, in die sie eingebettet sind und bringen ihre eigenen Stile und Skripte mit, die wiederum nicht auf die Seite zugreifen können, in die sie eingebettet sind.

Für die Seite, die Inhalte anderer Seiten über ein iframe einbettet, birgt das iframe ein gewisses Maß an Sicherheit: Eingekapselt in ein iframe statt direkt in die Seite eingebettet bleibt der fremde Inhalt von der eigenen Seite getrennt.

Zwischen dem öffnenden und schließenden iframe-Tag können Texte, Bilder oder Links stehen. Die Inhalte zwischen dem öffnenden und schließenden Tag werden nur von Browsern dargestellt, die das iframe-Tag nicht erkennen. In freier Wildbahn werden wir derart alten Browsern nicht mehr begegnen.

HTML Codesequenz für iframe

<iframe height="260" width="280" src="iframe.html"> 
   <a href="iframe.html">Lorem ipsum </a> 
</iframe> 

iframe- kontra object-Tag

Im Grunde genommen hätte das flexiblere object-Tag das iframe-Tag überflüssig gemacht, das aus XHTML 1.1 auch endgültig verbannt wurde.

Das object-Tag funktioniert in allen Browsern tadellos – als wäre es ein iframe. Allerdings war das object-Tag in Internet Explorer bis Version 7 derart lieblos und obendrein fehlerhaft implementiert, dass es nur in wenigen Umgebungen möglich war, ein object-Tag anstelle von iframes einzubinden. Erst IE8 zeigt object-Tags ohne überflüssige Scrollleisten und störende Rahmen.

iframe-Tags in HTML-Seiten einsetzen

Die einzige Methode, einem iframe Inhalt zuzuweisen, war vor HTML5 die Angabe einer URL im src-Attribut. Das iframe-Dokument übernimmt das CSS des aufrufenden Dokuments nicht und nutzt nur sein eigenes CSS für die Formatierung des Inhalts.

Mit dem sandbox-Attribut kann die aufrufende Seite den Inhalt des iframes einschränken – aus Sicherheitsgründen – und z.B. Scripte oder Formulare ausschließen.

iframe mit sandbox: Die Überschrift ist nicht mehr Orange wie im Beispiel oben, denn das Orange wird von einem Script getriggert. Der Link ist nicht mehr klickbar.
Nicht IE8 und älter
<iframe src="iframe.html" seamless sandbox=""></iframe>

sandbox verhindert die Ausführung von Scripten, Plugins, Links, die aus dem iframe hinausführen, den Zugriff auf Cookies und auf andere Seiten (auch aus derselben Domaine).

Die Einschränkungen können durch allow-forms, allow-same-origin, allow-scripts, allow-top-navigation aufgehoben werden.

Auf jeden Fall sollten allow-scripts und allow-same-origin nicht zusammen erlaubt werden: Dann könnte die eingebettete Seite das sandbox-Attribut vollständig entfernen und damit alle Sicherheitsvorkehrungen aus dem Weg räumen.

seamless

seamless soll das iframe-Element ohne Rahmen in die Seite setzen. Das funktioniert allerding zurzeit nur in den Webkit-Browsern Chrome und Safari.

iframe mit srcdoc

Wie schon erwähnt: Vor HTML5 war die Angabe einer URL für ein externes Dokument die einzige Methode, Inhalt in ein iframe zu setzen. HTML5 bringt für iframe das neue Attribut srcdoc, das HTML-Code aufnimmt und als Inhalt des iframe darstellt.

Das srcdoc-Attribut beim neuen iframe ist eine Absicherung gegen Inhalte von Quellen, die nicht vertrauenswürdig sind.

Kommentare, die nur einfaches HTML enthalten, sind ein typischer Falle für das scrdoc-Attribut.

Alle modernen Browser außer Internet Explorer (einschl. IE11)
<iframe seamless srcdoc='
<html>
<head>
   <style>body{background:ivory}</style>
</head>

<body>
<p>…</p>

</body></html>'>
</iframe>

HTML-Attribute für iframe

src
URL einer HTML-, ASP-, PHP- oder anderen Seite. Der Inhalt der referenzierten URL erscheint im Frame.
seamless
gibt an, dass sich das iframe ohne sichtbaren Rahmen in die Seite einfügen soll.
srcdoc
Für ein besonderes Maß an Sicherheit bei Inhalten aus nicht-vertrauenswürdigen Quellen wird der Quelltext des iframes in das srcdoc-Attribut gesetzt.
height
vertikale Ausdehnung des iframe-Elements – entweder in Pixel oder Prozentangaben in Bezug auf die Gesamthöhe des umfassenden Blocks.
width
horizontale Größe des iframes entweder in Pixel oder als Prozentsatz des umspannenden Elements.
sandbox
legt Einschränkungen für den Inhalt des iframes fest
allow-forms, allow-same-origin, allow-scripts, allow-top-navigation
name
Zeichenfolge, die den Frame identifiziert. Der Name muss eindeutig sein und darf nur einmal im Dokument vorkommen.
frameborder (nicht unterstützt in HTML5)
Rahmen um den Frame. Die möglichen Werte sind 0 oder no und 1 oder yes. Der Wert von yes oder 1 erlaubt die Darstellung eines Rahmens. Ein Wert von no oder 0 unterdrückt die Ausgabe eines Rahmens. CSS border: 0 entfernt den Rahmen, der bei iframe automatisch gerendert wird.
longdesc (nicht unterstützt in HTML5)
URL eines HTML-Dokuments, das eine ausführlichen Beschreibung des Frames enthält. Das Attribut ist dafür gedacht, mehr Informationen zur Verfügung zu stellen, als das title-Element darstellen kann.
marginheight, marginwidth (nicht unterstützt in HTML5)
Abstand nach unten und oben / rechts und links zwischen Framerahmen und Inhalt in Pixel. Wenn unrealistische Werte angegeben werden, ignoriert der Browser das Attribut.
scrolling (nicht unterstützt in HTML5)
horizontale und vertikale Scrollleiste, die im Frame erscheint. Wenn der Inhalt größer ist als der Frame, erlaubt sie dem Besucher, aufwärts und abwärts oder nach rechts und links zu scrollen, um den gesamten Inhalt zu sehen. Die drei möglichen Werte sind: yes, womit festgelegt wird, dass stets eine Scrollleiste erscheint, no, womit nie eine Scrollleiste erscheint, und auto, das die Scrollleiste einspielt, wenn sie erforderlich ist. Wenn kein Wert angegeben wird, ist die Voreinstellung auto.

scrolling, marginwidth /marginheight

Die HTML-Attribute, die für die Darstellung des iframes gesorgt haben, sind aus HTML5 verbannt. Stattdessen soll CSS verwendet werden.

Anstelle von scrolling="no" entfernt overflow:hidden die Scrollleisten.

Die älteren IE-Versionen brauchen die alten Attribute aber weiterhin, damit sich das iframe nahtlos in die Seite platziert. Vorsichtshalber nimmt man also beides: Das seamless-Attribut und scrolling.