HTML/Multimedia und Grafiken/Aktive Inhalte einbinden
Sie können beliebige aktive Elemente wie Excel-Tabellen, AutoCad-Dateien, Flash-Movies, (animierte) SVG-Grafiken, Java-Applets, Midi-Musikdateien, PDFs und vieles andere mehr in Ihre Web-Seite einbinden.
Inhaltsverzeichnis
audio, video[Bearbeiten]
Für die Einbindung von Ton- bzw. Videodokumenten stehen die Elemente audio bzw. video zur Verfügung. Sie sind wesentlich mächtiger als die hier vorgestellten Elemente, da sie keine zusätzlichen Plugins benötigen und eigene Steuerungselemente für das Abspielen mitbringen.
object[Bearbeiten]
Im Unterschied zu der Einbindung mit embed und iframe können Sie mit object alternative Inhalte als Fallback zur Verfügung stellen.
Folgende Attribute sind möglich:
-
data: URI, der den Ort der Quelle bestimmt -
form: ID des form Elementes mit dem es in Verbindung stehen kann -
height: Höhe -
name: Name -
type: Während der Internet Explorer Flash über ActiveX abspielt, zeigt der MIME-Typ anderen Browsern den Typ des Plugins an -
usemap: (#)Hash Identifizierungsname des map-Elementes, mit dem es in Verbindung stehen kann. -
width: Breite
param[Bearbeiten]
Parameter werden durch <param name="…" value="…"> angegeben. Beim Attribut name geben Sie den Namen des Parameters an. Bei value geben Sie den gewünschten Wert des Parameters an, der dem Plugin übergeben werden soll.
Bei xml-konformer Schreibweise (wie z.B. in XHTML) benötigt das param-Tag den schließenden Schrägstrich (/).
embed[Bearbeiten]
Daneben existiert das embed-Element, das lange nicht zum HTML-Standard gehörte und erst mit HTML5 offiziell akzepiert wurde.
Folgende Attribute sind möglich:
height: Höhesrc: referenziert den Ort der Quelletype: gibt die Art des zu ladenden Plugins anwidth: Breite
iframe[Bearbeiten]
Das iframe-Element wird eher zum Einbinden von Dokumenten und anderen Web-Seiten verwendet. Eingebettete Frames sind ähnlich wie Grafiken Bereiche innerhalb einer HTML-Datei, in denen fremde Quellen, vor allem andere HTML-Dateien angezeigt werden können.
Folgende Attribute sind möglich:
height: Höhename: Name des iframessandbox: lässt den iframe in einer sandbox mit erhöhten Sicherheitsrestriktionen laufen.seamless: lässt den iframe als Teil der Seite erscheinensrc: Quellesrcdoc: ermöglicht die Angabe von HTML, das dann als Inhalt des iframes dargestellt wirdwidth: Breite
Vorteile einer Sandbox[Bearbeiten]
Wenn Sie das Attribut sandbox setzen, können sie bestimmte Aktivitäten der eingebundenen Webseite verhindern. Dies erhöht Ihre Sicherheit.
Details: caniuse.com
Folgende Werte sind möglich:
(kein Wert): alle Restriktionen geltenallow-forms: hebt das Verbot der Formularabsendung wieder aufallow-pointer-lockermöglicht APIsallow-popups: hebt das Verbot von Popups wieder aufallow-same-origin: ermöglicht den Inhalt des iframes als same-origin zu behandelnallow-scripts: hebt das Verbot von Scripting wieder aufallow-top-navigation: ermöglicht den Inhalt des iframes andere Seiten aufrufen zu lassen
Im Beispiel wird Twitter in einem iframe gezeigt. Das Absenden von Formularen, Scripting und Popups ist wieder ermöglicht worden.
seamless[Bearbeiten]
Mit dem Attribut seamless sollte erreicht werden, dass der eingebundene iframe nahtlos in die Webseite eingepasst würde, so dass keine Rahmen oder sogar Scrollbars erscheinen. Chrome hatte dies ab Version 22 unterstützt, entzog diese aber wieder ab Version 26. Mittlerweile wurde seamless aus der Spezifikation gestrichen[2].
Details: caniuse.com
srcdoc[Bearbeiten]
Mithilfe des srcdoc-Attributs lässt sich HTML-Code als Inhalt des iframes angeben, dabei hat das srcdoc-Attribut Vorrang vor dem src-Attribut. Bisher ließ sich dies zwar bereits über Data-URLs erreichen, aber hierfür musste das HTML URL-codiert werden, was im srcdoc-Attribut hingegen nicht der Fall ist. Außerdem lässt sich mithilfe des sandbox-Attribut der enthaltene Code isolieren, da alle Browser, die srcdoc unterstützen, sandbox ebenfalls unterstützen. Browser, die srcdoc nichts anfangen können, stellen gar nichts dar – der zu isolierende Inhalt sollte keinesfalls als Fallback im src-Attribut abgelegt werden, da dies die Verwendung des srcdoc-Attributs ad absurdum führen würde.
<p>Die beiden folgenden iframes zeigen den gleichen Inhalt an:</p>
<iframe src="data:text/html,%3Cb%3EHTML%3C%2Fb%3E"></iframe>
<iframe srcdoc="<b>HTML</b>"></iframe>
<p>Das srcdoc-Attribut hat – sofern der Browser es unterstützt – Vorrang gegenüber src:</p>
<iframe srcdoc="HTML aus srcdoc" src="data:text/html,HTML%20aus%20src"></iframe>
<p>Im folgenden iframe wird kein JavaScript ausgeführt:</p>
<iframe
srcdoc="JavaScript? <script>alert('Hallöle!');</script> <noscript>...kein JavaScript...</noscript>"
sandbox
>
</iframe>
Anwendung[Bearbeiten]
mit Iframes eingebundene Webseiten verkleinern[Bearbeiten]
Sie können eine mit einem iframe eingebundene Webseite verkleinern, wenn sie den iframe oder ein entsprechendes Container-Element mit der CSS-Eigenschaft transform:scale() skalieren.
iframe.verkleinert{
height: 480px;
width: 640px;
display: block;
overflow: hidden;
position: absolute;
transform: scale(0.5);
transform-origin: left top 0;
}
Referenz[Bearbeiten]
Quellen[Bearbeiten]
- ↑ CanIUse: svg-smil
- ↑ WHATWG: Remove `<iframe seamless>`; W3C: Remove seamless attribute from iframe
