Fremdinhalte einbetten | iframes
Siehe auch Mediaevent
CSS Breite 100% Seitenverhältnis siehe hier
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.
| 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. |
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
|
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.
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. | |
|
Stattdessen sollte man CSS Eigenschaft border verwenden |
|
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.
<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