<iframe>
Bedeutung
Eingebettetes Framefenster für beliebige andere Inhalte
Notation
<iframe [Attribute]>[Elementinhalt]</iframe>
Elternelemente
Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:
Liste der HTML 5 Block-ElementeBlock-Elemente
und Liste der HTML 5 Inline-ElementeInline-Elemente
- ausgenommen zum <button> Element<button>
.
Elementinhalt
Kann Text mit folgenden anderen HTML-Elementen enthalten:
Liste der HTML 5 Block-ElementeBlock-Elemente
und Liste der HTML 5 Inline-ElementeInline-Elemente
.
Attribute
Kann folgende elementspezifische Attribute enthalten:zum HTML5 Attribut heightheight
| zum HTML5 Attribut namename
| zum HTML5 Attribut sandboxsandbox
| zum HTML5 Attribut seamlessseamless
| zum HTML5 Attribut srcsrc
| zum HTML5 Attribut srcdocsrcdoc
| zum HTML5 Attribut widthwidth
Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:zum HTML5 Attribut accesskeyaccesskey
| zum HTML5 Attribut classclass
| zum HTML5 Attribut contenteditablecontenteditable
| zum HTML5 Attribut contextmenucontextmenu
| zum HTML5 Attribut datadata
| zum HTML5 Attribut dirdir
| zum HTML5 Attribut draggabledraggable
| zum HTML5 Attribut hiddenhidden
| zum HTML5 Attribut idid
| zum HTML5 Attribut itemitem
| zum HTML5 Attribut itempropitemprop
| zum HTML5 Attribut langlang
| zum HTML5 Attribut spellcheckspellcheck
| zum HTML5 Attribut stylestyle
| zum HTML5 Attribut subjectsubject
| zum HTML5 Attribut tabindextabindex
| zum HTML5 Attribut titletitle
onabort
| onblur
| onchange
| onclick
| oncontextmenu
| ondblclick
| ondrag
| ondragend
| ondragenter
| ondragleave
| ondragover
| ondragstart
| ondrop
| onfocus
| onkeydown
| onkeypress
| onkeyup
| onmousedown
| onmousemove
| onmouseout
| onmouseover
| onmouseup
| onmousewheel
| onscroll
Standard-Style-Formateigenschaften
iframe:focus {
outline: none;
}
iframe {
border: 2px inset;
}
Beispiel
<iframe src="http://webdesign.tepelmann.com/" width="770" height="350" style="border: 0;"><a href="http://webdesign.tepelmann.com/">W3C Spezifikation zum <iframe> - Element</a></iframe><hr /><iframe seamless sandbox="allow-top-navigation"src="http://webdesign.tepelmann.com/"width="770" height="350" ></iframe>
Anzeigebeispiel
Erläuterung
Das <iframe>
Element bietet, neben dem Bedeutung: <iframe>inline frame; eingebetteter Rahmen
<object>
und <embed>
Element, die Möglichkeit beliebige andere Ressourcen in HTML einzubetten.
Einer der häufigsten Anwendungsfälle dieses Elements ist das vollständige einbinden anderer Webseiten in das Dokument und kommt häufig bei statischen HTML Seiten zur Anwendung, um wiederkehrende Inhalte wie beispielsweise Navigationen, Header oder Footer in allen Einzelseiten einzubinden.
Im einleitenden <iframe>
Tag wird mit dem Attribut src
eine andere HTML-Datei referenziert, deren Inhalt im Bedeutung: srcsource; Quelle
<iframe>[...]</iframe>
Bereich angezeigt wird. Sollte der Browser das <iframe>
Element nicht kennen oder nicht anzeigen können, so wird der zwischen <iframe>[...]</iframe>
notierte Element-Inhalt als alternativer Inhalt angezeigt. Im obigen Beispiel würde der Verweis zur Seite angezeigt, die über den Inline-Frame eingebettet wurde.
Die Größe des <iframe>
Bereichs wird durch die Attribute width
und height
in Pixeln definiert, eine Angabe in Prozent ist in HTML5 nicht valide. Da es unter Umständen jedoch sinnvoll sein kann prozentuale Breiten zu verwenden, muss hier auf die CSS-Eigenschaft width
ausgewichen werden. Das Unterdrücken des, häufig als störend empfundenen, Rahmens wird durch style="border: 0"
definiert. Die früher verwendeten Attribute border
und frameborder
wurden in der HTML5 Spezifikation ersatzlos gestrichen. Dies betrifft ebenso das Attribut scrolling
mit dem bisher das Scroll-Verhalten im Inline-Frame beeinflusst wurde, auch hier muss auf die CSS-Eigenschaft overflow
ausgewichen werden.
sandbox Attribut
Werden Inhalte über eingebettete Frames eingebunden, so gilt in allen modernen Browsern die sogenannte Same-Origin-Policy (SOP), dieses Sicherheitskonzept verhindert das eingebundene Inhalte von fremden Webseiten, nicht auf Objekte der einbindende Webseite zugreifen und diese gegebenenfalls manipulieren können. Unter Umständen kann es jedoch notwendig sein eingebundenen Inhalten von fremden Webseiten genau diesen Zugriff zu ermöglichen und die Same-Origin-Policy zu lockern. Um dem Browser die Berechtigungen eines eingebetteten Frames zu übermitteln, stellt HTML5 das Attribut sandbox
bereit, dem ein oder mehrere der folgenden Werte zugewiesen werden können.
- allow-same-origin
- Dieser Attribut-Wert weist den Browser an, die per Inline-Frame eingebettete Webseite so zu behandeln, als würde sie aus derselben Quelle (Origin) stammen wie das einbindende HTML-Dokument.
Die Same-Origin-Policy für das iframe Element wird aufgehoben. - allow-top-navigation
- Dieser Attribut-Wert weist den Browser an, dass die per Inline-Frame eingebettete Webseite die Link-Navigation der einbettenden Webseite beeinflusst. Enthält die per Inline-Frame eingebettete Webseite beispielsweise Verweise mit einer Angabe wie <a href="seite.html" target="_top">, wird beim Anklicken das gesamte aktuelle Fenster geändert und nicht nur der Inhalt der per Inline-Frame eingebettete Webseite.
- allow-forms
- Dieser Attribut-Wert weist den Browser an, dass die per Inline-Frame eingebettete Webseite Formulare enthalten darf und demnach Eingaben abfragen oder erzwingen kann. Für den Benutzer ist möglicherweise nicht erkennbar, dass das in einem eingebetteten Frame aufgerufene Formular nicht von der aufgerufenen Webseite stammt.
- allow-scripts
- Dieser Attribut-Wert weist den Browser an, dass die per Inline-Frame eingebettete Webseite Script-Code enthalten darf und somit auf die eingebettete Webseite zugreift. Dieses Script kann somit aus dem eingebetteten Frame beispielsweise Inhalte der einbettenden Webseite manipulieren.
Wie bereits erwähnt, können dem Attribut sandbox
einzelne Werte wie <iframe sandbox="allow-same-origin">
oder mehrere aufeinanderfolgende Werte wie <iframe sandbox="allow-forms allow-scripts allow-top-navigation">
zugewiesen werden. Die Nutzung des sandbox
Attributs sollte nur erfolgen, wenn die per Inline-Frame eingebettete Webseite dies zwingend erfordert und bekannt ist welche Formulardaten bzw. Scripte von der eingebetteten Webseite gefordert bzw. ausgeführt werden.
Sandbox Nutzung innerhalb der eigenen Webseite
Bei dynamischen Webseiten, kann es erforderlich sein Inhalte die von Nutzern eingegeben werden und möglicherweise schadhaften Code enthalten könnten die Same-Origin-Policy zu entziehen. Für diesen Fall kann das sandbox
Attribut auch wie im folgenden Beispiel als Standalone Attribut notiert werden.
<iframe sandbox src="NutzerBeitraege.php?id=110"></iframe>
In diesem Fall wird das vom eigenen Server stammende PHP-Script, welches normalerweise unter die Same-Origin-Policy fallen würde, als ein von einem fremden Server stammendes PHP-Script deklariert.
seamless Attribut
Für die Einbindung wiederkehrender Inhalte wie beispielsweise Navigationen, Header oder Footer in statische HTML Seiten bietet HTML5 für Inline-Frames das Attribut seamless
an. Diese Attribut weist den Browser an, die im Bedeutung: seamlessseamless; nahtlos
src
Attribut angegebene Ressource zu inkludieren, und nicht einzubetten.
Folglich werden die Stylesheet-Definitionen des inkludierenden Dokuments auch für das inkludierte Dokument gültig, entgegen der Einbettung per Inline-Frame, bei der die Style-Definitionen des eingebetteten Dokuments beibehalten werden.
Ebenso verändert sich das Verhalten von Hyperlinks die, wenn nichts anderes definiert wurde, das Verweisziel im Fenster oder Tab des inkludierenden Dokuments öffnen. Bei Einbettung per Inline-Frame werden Hyperlinks, wenn nichts anderes definiert wurde, im Inline-Frame-Fenster geöffnet.
srcdoc Attribut
Mit dem Attribut srcdoc
wird der Inhalt eines Inline-Frames direkt notiert, anstatt ihn mit dem Attribut src
zu referenzieren. In Verbindung mit dem Attribut sandbox
können Inhalte somit direkt in den HTML-Code eingefügt werden. Das <iframe>
Element enthält in diesem Fall kein src
Attribut.
In diesem Fall ist innerhalb des <iframe>
Elements stattdessen als Erstes ein sandbox
Attribut notiert, wodurch die eingebundene Inhalte als von einem fremden Server stammend behandelt werden und der Same-Origin-Policy unterliegen. Als Zweites wird ein seamless
Attribut, um den Inhalt in die Webseite zu inkludieren, und drittens folgt das srcdoc
Attribut, welches den gesamten HTML-Code des einzubindenden Inhalts definiert.
Die HTML5 Spezifikation schreibt jedoch vor, dass die Zeichen " und & innerhalb der Wertzuweisung des srcdoc
Attributs durch ihre HTML-Entity " bzw. & ausgezeichnet werden müssen.
<iframe sandbox seamless srcdoc="<p>Sie können die Bilder <a href="/gallery.php?page=cover&imgid=21">in der Galerie sehen</a>.</p>"></iframe>