HTML/Tutorials/Aktive Inhalte einbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
HTML


Sie können beliebige aktive Elemente wie AutoCad-Dateien, Excel-Tabellen, Java-Applets, Kaartenausschnitte Midi-Musikdateien, PDFs und vieles andere mehr in Ihre Web-Seite einbinden.

Diese Art der Einbindung ist in den letzten Jahren etwas aus dem Blick geraten:

  • HTML5 audio bzw. video 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.
  • SVG kann ohne einen früher notwendigen Viewer direkt im HTML, als img oder als background-image eingebunden und sogar animiert werden.
  • Flash und im Browser ausgeführte Java-Applets werden aus Sicherheitsbedenken nicht mehr unterstützt.

iframe[Bearbeiten]

Das iframe-Element (engl. inline frames) 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.

  • HTML 4.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Attribute sind möglich:

  • height: Höhe in CSS-Pixel
  • name: Name des iframes
  • sandbox: lässt den iframe in einer sandbox mit erhöhten Sicherheitsrestriktionen laufen.
  • seamless: lässt den iframe als Teil der Seite erscheinen
  • src: Quelle
  • srcdoc: ermöglicht die Angabe von HTML, das dann als Inhalt des iframes dargestellt wird
  • width: Breite in CSS-Pixel
    Beachten Sie: In HTML5 ist die Angabe von Prozentwerten verpönt; Formatierungen sollten über das CSS erfolgen.
Einbinden von Dateien mit iframe ansehen …
<h1>Fenstergucker</h1> <p>Gucken Sie mal SELFHTML im Fenster an:</p> <iframe src="https://wiki.selfhtml.org/wiki/Startseite" width="900" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe>
Beachten Sie: Websites können auf verschiedene Weisen verhindern, dass sie sich in Frames einbinden lassen. Dies äußert sich meist darin, dass das Frame „inhaltslos“ bleibt.
Im Beispiel wurde innerhalb des iframes ein Textabsatz mit einem Alternativtext als Fallback notiert. Dieser wirft im Validator zwar einen Fehler, die auf SO vorgschlagene Alternative, den Fallbacktext in einem Hintergrundbild zu verstecken, wäre ja nicht barrierefrei!

Vorteile einer Sandbox[Bearbeiten]

Wenn Sie das Attribut sandbox setzen, können Sie bestimmte Aktivitäten der eingebundenen Webseite verhindern. Es handelt sich dabei um eine Mitigation-Technik, die die Auswirkungen einer XSS- oder CSRF-Lücke mindern soll.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Folgende Werte sind möglich:

  • (kein Wert): alle Restriktionen gelten
  • allow-forms: hebt das Verbot der Formularabsendung wieder auf
  • allow-pointer-lock: ermöglicht die Verwendung der Pointer-Lock-API
  • allow-popups: hebt das Verbot von Popups wieder auf
  • allow-same-origin: erlaubt dem Dokument des iframes innerhalb seiner same-origin zu laufen
  • allow-scripts: hebt das Verbot von Scripting wieder auf
  • allow-top-navigation: ermöglicht den Inhalt des iframes andere Seiten aufrufen zu lassen
iframe mit sandbox
<iframe sandbox="allow-scripts allow-popups allow-forms" src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"> </iframe>

Im Beispiel wird Twitter in einem iframe gezeigt. Das Absenden von Formularen, Scripting und Popups ist wieder ermöglicht worden.

allow-same-origin[Bearbeiten]

Das sandbox-Attribut entfernt die Berechtigung des eingebetteten Dokuments, auf die Daten seiner eigenen Origin zuzugreifen. Bettet eine beliebige Seite ein Dokument von example.com/foo ein, so darf das eingebettete Dokument nicht auf seine eigenen Daten zugreifen (etwa window.localStorage oder document.cookie). Dies kann mit der Angabe von sandbox="allow-same-origin" wieder zurückgenommen werden: wird dieses Attribut notiert, so darf das eingebettete Dokument wieder auf die eigenen Daten nach der Same-Origin-Policy zugreifen.

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.

  • HTML5
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
randloses IFrame ansehen …
<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? &lt;script&gt;alert('Hallöle!');&lt;/script&gt; &lt;noscript&gt;...kein JavaScript...&lt;/noscript&gt;"
 sandbox
>
</iframe>

seamless[Bearbeiten]

Mit dem Attribut seamless sollte erreicht werden, dass der eingebundene iframe nahtlos in die Webseite eingepasst würde, sodass keine Rahmen oder sogar Scrollbars erscheinen. Chrome hatte dies ab Version 22 unterstützt, entzog die Unterstützung aber wieder ab Version 26. Mittlerweile wurde seamless aus der Spezifikation gestrichen[1].

  • Achtung
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

randloses IFrame ansehen …
<h1>Fenstergucker</h1> <p>Gucken Sie mal SELFHTML im Fenster an:</p> <iframe src="https://wiki.selfhtml.org/wiki/Startseite" seamless width="90%" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe>

Wenn Sie keinen Rahmen um das iframe-Element haben wollen und sich nicht darauf verlassen möchten, dass der jeweilige Browser das seamless-Attribut unterstützt, können Sie das auch mit einer passenden CSS-Regel erreichen:

randloses IFrame ansehen …
<head>
  ...
  <style>
    iframe { border: none; }
  </style>
</head>
<body>
  ...
  <iframe ...>
  ...
</body>

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.

verkleinerte Webseite
iframe.verkleinert{
    height: 480px;
    width: 640px;
    display: block;
    overflow: hidden;
    position: absolute;
    transform: scale(0.5);
    transform-origin: left top 0;
}


object[Bearbeiten]

Im Unterschied zu der Einbindung mit embed und iframe können Sie mit object alternative Inhalte als Fallback zur Verfügung stellen.

  • HTML 4.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Attribute sind möglich:

  • data: URI, der den Ort der Quelle bestimmt
  • form: ID des form Elements, 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
Einbinden von Dateien mit object ansehen …
<object data="https://wiki.selfhtml.org/local/Kaleidoskop.svg" type="image/svg+xml"> <param name="src" value="/local/Kaleidoskop.svg"> <!-- Fallback --> <img src="kaleidoskop.gif" alt="Blick in ein Kaleidoskop"> </object>

Browser, die keine SVG-Grafiken darstellen können, zeigen stattdessen eine andere Grafik. Falls auch diese Grafik nicht angezeigt werden kann oder soll, steht der Alternativtext zur Verfügung.

Beachten Sie: Die Microsoft-Browser IE9-11 können die SMIL-Animation nicht darstellen.[2]


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.

Beachten Sie: Objekte sind aus HTML-Sicht Inline-Elemente. In der Strict-Variante von HTML4 müssen solche Elemente innerhalb von Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

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 akzeptiert wurde.

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Folgende Attribute sind möglich:

  • height: Höhe
  • src: referenziert den Ort der Quelle
  • type: gibt die Art des zu ladenden Plugins an
  • width: Breite
Einbinden von Dateien mit embed
<embed width="600" height="400" data="nibbles.swf" type="application/x-shockwave-flash" src="nibbles.swf">

Referenz[Bearbeiten]

Quellen[Bearbeiten]

  1. WHATWG: Remove `<iframe seamless>`; W3C: Remove seamless attribute from iframe
  2. CanIUse: svg-smil