Fremdinhalte einbetten | iframes

siehe auch Youtube Video oder Iframe mit 100% Breite einbetten CSS

Mit dem Element iframe kann man einen Bereich auf einer HTML Seite definieren, in dem ein referenzierter Inhalt erscheint. Der referenzierte Inhalt kann eine komplette HTML Seite sein, ein Bild, Multimedia, Video, Audio, Google Map also alles, was man referenzieren kann und der Browser darstellen kann. Es kann auch Fremdinhalt irgendwo aus dem Netz eingebunden werden.

Ein iframe wird mit Start und Endtag definiert. Innerhalb des Gültigkeitsbereiches können Sie alternativen Text einfügen, der angezeigt wird, wenn der Browser keine iframes darstellen kann.

<iframe src="rot.html">Hier erscheint eine rote Seite</iframe>

Ein iframe benötigt mindesten das Attribut src mit dem der Inhalt referenziert wird.

Attribute des iframe Elemts
Attribut Bedeutung
src Source (Quelle): URL / relativer oder absoluter Pfad zu einem Inhalt, der im iframe angezeigt werden soll.
name Das name Attribut sollte vor allen Dingen dann nicht fehlen, wenn es möglich sein soll, dass ein Link, eine Seite oder andere Datei im Iframe anzeigt: siehe Seite im Iframe laden siehe Hyperlinks / target
width Das Attribut für die Breite sollte unbedingt eingefügt werden, andernfalls wird eine Standardgröße verwendet.
Hier kann man eine Ganzzahl angeben, welche die Breite des iframes in Pixeln definiert. Man kann auch eine Zahl mit hintenangestelltem Prozentzeichen einfügen, um die Breite prozentual zum Elternelement zu definieren.
height

Das Attribut für die Höhe sollte unbedingt eingefügt werden, andernfalls wird eine Standargröße verwendet.
Hier sollte man eine Ganzzahl angeben, der die Höhe des iframes in Pixeln definiert. Man kann auch eine Zahl mit hintenangestelltem Prozentzeichen einfügen, um die Höhe prozentual zum Elternelement zu definieren.

seamless

Websites mit statischen Webseiten haben das Problem, dass eine Navigation, die auf die einzelnen Seiten des Webprojektes verweist, auf allen Seiten aktualisiert werden muss. Es gibt dynamische Lösungen beispielsweise mit PHP wobei das Codefragment (beispielsweise das Menü) inkludiert wird.

HTML5 bietet dafür ein neues standalone Attribut für iframes an und zwar seamless seamless= nahtlos soll den Browser dazu veranlassen die Seite nicht einzubetten sondern zu inkludieren. Das bedeutet, der Inhalt ist somit Teil der Seite. Leider wird es von den Browsern noch gar nicht oder kaum umgesetzt 2014.

  • Die Seite im iframe verhält sich so als würde der Inhalt in einem div stehen und nicht als gesonderte Seite in einem iframe. Angaben zu width und height werden überflüssig, verwenden Sie lieber CSS Style Sheets wie für ein div.
  • Stylesheets wirken sich auf den Inhalt der Seite aus.
  • Hyperlinks öffnen die Seite im gesamten Browserfenster, wenn nichts anderes angegeben ist.
allowfullscreen Die Funktion, ein Video im gesamten Fenster anzeigen zu lassen, ist eine Funktion des Flashplayers. Das Abspielen von flv Videos wird zur Zeit (2014) noch größtenteils vom Flashplayer übernommen. Wenn man einem, in einen iframe eingebettetem Video, die Möglichkeit einräumen will, im gesamten Browserfenster abgespielt zu werden, sollte man dem iframe das standalone Attribut allowfullscreen zuweisen.
crossorigin (Programmierkenntniss erforderlich)
sandbox

Im Web 2.0 ist es üblich auch Inhalte von Fremdanbietern in eingebetten Frames anzubieten. Die modernen Browser funktionieren allerdings nach der sogenannten Same-Origin-Policy das hindert die eingebundene Fremdanbieter-Seite daran Inhalte der einbindenden Seite zu manipulieren. Anders ausgedrückt: Wenn die Seite im iframe nicht vom gleichen Host kommt, kann sie nicht die übergeordnete Seite manipulieren. Das kann allerdings erwünscht sein. Deshalb gibt es in HTML5 das sandbox Attribut, welches bestimmte Verhaltensweisen erlaubt. Eine oder mehrere Angaben sind möglich.
<iframe sandbox="allow-top-navigation"...>

<iframe sandbox="allow-top-navigation allow-forms"...>

  • allow-same-origin Die same Origin Policy wird aufgehoben. Die Seite wird behandelt als käme sie vom gleichen Host.
  • allow-top-navigation Die Seite kann den Browsing Context ändern. Ein Link a-Element mit dem target="_top" Attribut würde die verlinkte Seite im gesamten Fenster öffnen.
  • allow-forms Die Seite darf Formulare enthalten und vom Anwender Eingaben abfragen oder fordern.
  • allow-scripts Die Seite darf Script enthalten, das auf die einbettende Webseite zugreift.

Verwenden Sie diese Möglichkeit nur, wenn Sie den Fremdanbieter gut kennen oder Sie selbst der Fremdanbieter sind.

Auch der umgekehrte Fall ist denkbar. Wenn man möchte dass eine Seite innerhalb des iframes, welche vom gleichen Host stammt so behandelt wird, als käme sie von einem fremden Host, gibt man das sandbox Attribut als standalone Attribut an. Das kann von Nutzen sein, wenn die eingebettete Seite PHP-Code enthält, der über Formulare schadhaften Code von Usereingaben enthalten könnte.

Veraltete Attribute
Die folgenden Attribute sind veraltet und gehören nicht mehr zum HTML 5 Standard. Stattdessen soll man CSS einsetzen.
frameborder Stattdessen sollte man CSS Eigenschaft border verwenden
border Stattdessen sollte man CSS Eigenschaft border verwenden
scrolling yes, no
Wenn der eingebettete Inhalt größer ist, als der iframe, enstehen Scrollleisten. Dieses Scrollverhalten sollte man mit CSS steuern können. Da das jedoch noch nicht von allen Browsern in iframes umgesetzt wird, gibt es zur Zeit keine andere Möglichkeit als auf dieses veraltete Attribut zuzugreifen. scrolling="no" entfernt Scrollleisten.

Im folgenden ein Iframe mit relativ refernziertem Inhalt. Man sollte immer die Attribute width und height notieren, sonst erscheint der iframe in einer Standardgröße, wie in dem folgenden Beispiel.

Es folgt ein iframe mit eingebettetem Inhalt von einer anderen Domain.

<iframe width="560" height="315" src="//www.youtube.com/embed/JlUMRMpLzRo" frameborder="0" allowfullscreen></iframe>

Verlinkung / Target / Seite im übergeordneten Fenster öffnen

Verlinkung aus dem iframe heraus

Wenn man eine Seite in einem iframe eingebettet hat und hat auf dieser Seite ein Link zu einer anderen Seite gesetzt ist, so öffnet sich die verlinkte Seite innerhalb des iframe Bereichs. Durch das Erstellen eines iframe entsteht eine Hierachie. Die Seite, auf der der iframe definiert ist, ist die Elternseite. Die Seite die im iframe erscheint, ist das Kind. Wenn man nun von dieser Kindseite eine Seite verlinkt, die sich auf der Ebene der Elternseite öffnen soll, so muss man im a- Element das target Attribut hinzufügen mit dem Wert _parent.

<a href="irgendeineSeite.html" target="_parent">Irgeneine Seite</a>

Auch die anderen target Befehle und das Thema Base Target sind hier wichtig.


Ein Iframe lässt sich gut dazu einsetzen ein Navigationsmenü einzubetten, welches auf mehreren Seiten erscheinen soll, da man so die Möglichkeit hat, eine Änderung im Menü nur einer Stelle vornehmen zu müssen. Die Navigation befindet sich auf einer HTML-Seite. Im Head Bereich der Navigationsseite befindet sich das base Element mit target Attribut: <base target="_parent"> Dadurch öffnen sich alle verlinkten Inhalte auf der übergeordneten Seite und nicht im iframe selbst.

Auf allen Seiten befindet sich ein iframe in dem die Navigationsseite angezeigt wird. Außerdem befindet sich weiterer Inhalt auf den Seiten. Aktualisierungen im Menü werden nur auf der Navigationsseite vorgenommen, die auf allen Seiten im iframe erscheint. Das folgende Beispiel besteht aus 4 Seiten nav.html, bild1.html, bild2.html, bild3.html.

Sehen Sie dazu dieses einfache Beispiel mit einer Navigationsseite, die im iframe angezeigt wird.

Sehen Sie auch dieses kompliziertere Beispiel mit PHP Unterstützung.

Eine Seite mittels link in den Iframe laden

Wenn man auf der Elternseite, auf der ein iframe definiert ist, einen link setzt, der eine andere Seite innerhalb des iframes Bereich anzeigen soll, so muss man dem iframe mittels des name Attributs einen Namen zuweisen und im a - Element ein target Attribut setzen welches als Wert den gesetzten Namen des iframes bekommt.

so sieht's aus

<iframe name="farben" src="rot.html"></iframe>

Ein Link auf der Seite auf der auch der iframe definiert ist, könnte so aussehen.

<a href="blau.html" target="farben">Blau</a>

Prozentuale Größen definieren

Wenn man ein Youtube Video oder eine Google Map einbindet und möchte die Größe prozentual definieren, kann man einen kleinen Trick mit CSS anwenden. mehr dazu hier