Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

    <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 &lt;iframe&gt; - 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>InformationBedeutung: <iframe>inline frame; eingebetteter Rahmen Element bietet, neben dem <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 srcInformationBedeutung: srcsource; Quelle eine andere HTML-Datei referenziert, deren Inhalt im <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 seamlessInformationBedeutung: seamlessseamless; nahtlos an. Diese Attribut weist den Browser an, die im 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 &quot; bzw. &amp; ausgezeichnet werden müssen.

    <iframe sandbox seamless srcdoc="<p>Sie können die Bilder <a href=&quot;/gallery.php?page=cover&amp;imgid=21&quot;>in der Galerie sehen</a>.</p>"></iframe>
    


    W3C Logo & WHATWG Logo Spezifikation

    Tastaturkürzel