HTML5: Objekte und Rahmen

Zurück zu Bilder, Graphiken, Videos und Audios | Hoch zum Inhaltsverzeichnis | Vor zu Verweissensitive Graphiken

Das Element img hat, wie im vorherigen Kapitel gezeigt, als inhaltsleeres Element ein recht einfaches Modell, welches sich für komplexere Anwendungen oder strukturierte eingebettete Inhalte nicht eignet. Zudem gibt es bei gängigen Darstellungsprogrammen einige Probleme, die auf historische Implementierungen zurückzuführen sind. Diese beabsichtigten Probleme verhindern einerseits, daß bei den Programmen Sicherheitsprobleme wirksam werden, wenn das Element img bei beliebigen Formaten komplett funktionieren würde. Diese Implementierungsprobleme können aber andererseits auch verhindern, daß interaktive, animierte Dokumente wie gewünscht in img funktionieren.

HTML5 schränkt die Verwendung von img, picture, audio und video zudem auf bestimmte Formattypen ein, zudem können Alternativen nicht beliebig kombiniert werden. Ebenso sind insbesondere bei img interaktive, animierte Inhalte ausgeschlossen, was das oben skizzierte Verhalten aufgrund von Sicherheitsproblemen bei Programmen reflektiert. Daher besteht Bedarf, auch eine Möglichkeit zu haben, beliebige Formate einzubinden und Alternativen zu kombinieren. Dazu gibt es das Element object und mit einem sehr einfachen Inhaltsmodell das Element embed. Ferner gibt es mit iframe ein weiteres Element, um Inhalt einzubinden, welches sich in seiner Funktionalität leicht von object unterscheidet.

Allerdings scheinen neuere Versionen einiger gängiger Darstellungsprogramme wiederum neue Implementierungslücken zu haben, weswegen diese Versionen einige Formate mit object nicht mehr interpretieren können, welche frührere Versionen noch interpretiert haben. Insgesamt erweist sich damit oftmals aufgrund der mangelhaften Implementierungen das bunte Sammelsurium von HTML5-Elementen als unbefriedigendes Flickwerk. Autoren müssen jeweils mit diversen Programmen und Programmversionen probieren, was wirklich funktioniert. Um dies zu umgehen, kann es daher pauschal sinnvoller sein, wie zu Anfangszeiten von (X)HTML lediglich per Element a auf eigenständige Dokumente zu verweisen, statt diese mit speziellen Elementen einzubetten.

Das Konzept des Formates SMIL ist demgegenüber deutlich besser durchdacht sowie leistungsfähiger, strukturierter, einfacher, übersichtlicher, ist allerdings gleichfalls deutlich schlechter oder gar nicht in gängigen Darstellungsprogrammen implementiert, weil dazu bei der Entwicklung von HTML5 die Weichen falsch gestellt wurden, als statt des etablierten, durchdachten Konzeptes von SMIL ein eigenes Sammelsurium erfunden wurde.

Element object

Für beliebige Formate und strukturierten Text als Alternative bietet (X)HTML das Element object an, mit welchem nicht nur Graphik eingebunden werden kann, sondern auch interaktive, animierte Inhalte, Video-Formate, Audioformate, auch andere XML-Formate und selbst (X)HTML-Dokumente. Mit diesem allgemeineren Ansatz vermeidet object die technische Sackgasse des leeren Elementes img und bietet gleichzeitig die Möglichkeit, Alternativen in anderen Formaten und als strukturierten Text oder eine Mischung aus beidem anzubieten.

object selbst ist ein transparentes Element, kann also nach dem für dieses Element spezifischen Element param Inhalt enthalten, welchen das Elternelement enthalten darf. Es kann da notiert werden, wo fließender Inhalt erwartet wird.

Das Konzept besteht nun darin, daß sich jene param-Elemente, die Kindelemente eines object sind, auf dieses beziehen.

Anderer Inhalt von object stellt eine Alternative zu der Darstellung des von object referenzierten Dokumentes dar, falls dieses Dokument selbst nicht dargestellt werden kann (oder object nicht implementiert ist).

object hat die spezifischen Attribute data, name, type, typemustmatch, width, height und form. Umfang der Attribute und der Funktion des Elementes wurde in HTML5 gegenüber früheren Versionen eingeschränkt.

Beispiel, Einbettung einer Uhr im Format Java umgesetzt:

<figure>
  <object type="application/x-java-applet">
  <param name="code" value="JavaUhr.class" />
  <p>
     Eine Anwendung zur Interpretation von Java scheint nicht verfügbar zu sein.
     Im Falle einer Interpretation wird lediglich die aktuelle Uhrzeit angezeigt.
  </p>
  </object>
  <figcaption>Uhrzeit</figcaption>
</figure>

Attribut data

Die Angabe von data ist eine Möglichkeit, ein externes Dokument einzubetten. Der Wert von data ist eine URI/IRI oder (in seltenen Fällen) ein Fragmentidentifizierer. Dieser Wert gibt an, welcher Inhalt eingebettet werden soll. Da (X)HTML allein selbst die Funktionalität dafür nicht bietet, entfällt ohne weitere Tricks bei reinen (X)HTML-Dokumenten praktisch die Möglichkeit mit dem Fragmentidentifizierer.

Zu beachten: Das Darstellungsprogramm wird das referenzierte Dokument fast immer ohne vorherige Nachfrage beim Nutzer von der angegebenen Quelle zu laden versuchen. Bei der Referenzierung einer externen Quelle mittels absoluter URI/IRI gelangt so Information ohne Wissen des Nutzers auf den externen Dienstrechner. Hinsichtlich des Datenschutzes und der Privatsphäre des Nutzers ist dies bedenklich, folglich also besser zu vermeiden. Ist trotzdem eine externe Referenzierung erwünscht, ist im Sinne des Datenschutzes zuvor besser ein von dem Sachverhalt nicht betroffenes Dokument vorzuschalten, in welchem der Nutzer über das potentielle Datenleck informiert wird, sich damit also einverstanden erklärt, wenn das betreffende Dokument mit der externen Referenz aufgerufen wird. Sofern das überhaupt getan wird, sollte den Nutzern eine lokale Alternative bereitgestellt werden oder jedenfalls eine Variante des Projektes, welche auf derartige externen Quellen verzichtet.

Beispiel, fiktive akustische Ausgabe der Uhrzeit:

<figure>
  <object type="application/x-noise+xml"
          data="uhrzeit.xml">
  <p>
     Eine Anwendung zur Interpretation von application/x-noise+xml 
     scheint nicht verfügbar zu sein.
     Im Falle einer Interpretation wird lediglich 
     die aktuelle Uhrzeit angesagt.
  </p>
  </object>
  <figcaption>Uhrzeit</figcaption>
</figure>

Attribute width und height

Wird mit object ein Dokument eingebettet, welches Platz im Anzeigebereich benötigt, können zu dem Zwecke ähnlich wie bei img die Attribute width (Breite) und height (Höhe) notiert werden. Die dort gemachten Anmerkungen und Erläuterungen gelten entsprechend.

Der Wert ist jeweils eine Zahl als Angabe in Pixeln.

Beispiel Einbettung eines SVG-Dokumentes (auch interaktiv und animiert):

<figure class="SVG">
<object data="Sterntetraeder.svg" 
  width="400" height="400">
  <p>
  Offenbar kann das Format SVG (image/svg+xml) 
  nicht direkt angezeigt werden. 
  Sofern ein externes Programm zur Anzeige 
  von SVG verfügbar ist,
  kann folgender Verweis verwendet werden:
  <a href="Sterntetraeder.svg">Sterntetraeder</a>.
  </p>
  <p>
  Eine genaue Erklärung, was ein Sterntetraeder ist, 
  findet sich zum Beispiel bei wikipedia: 
  <a href="https://de.wikipedia.org/wiki/Sterntetraeder">
  Sterntetraeder allgemein</a>.
  </p>
  <p>
  Bei der konkreten Darstellung hier hat jede Seite eine 
  andere Farbe und ist teiltransparent. 
  Mit einer Animation dreht sich der Sterntetraeder vor dunklem
  Hintergrund um eine Achse durch den eigenen Schwerpunkt. 
  Es erfolgt eine Kugelprojektion auf die Darstellungsebene.
  </p>
</object>
</figure>

Als Alternative werden dem Nutzer gleich mehrere Optionen angeboten, welche alle als Kindelemente von object nacheinander angezeigt werden, der Nutzer kann also selbst wählen, was er tun will, aber auch nur, wenn die Datei nicht eingebettet angezeigt werden kann.

Höhe und Breite sind hier als jeweils 400 Pixel angegeben. Dies ist der Anzeigebereich, der dem SVG-Dokument zur Verfügung steht. Je nachdem, was im SVG-Dokument angegeben ist, wird dann dieses entweder auf die angegebene Größe skaliert oder geeignet angeordnet. Ist das SVG-Dokument kleiner als der Anzeigebereich, kann im SVG-Dokument angegeben werden, wie das SVG-Dokument im Anzeigebereich positioniert werden soll. Ist das SVG-Dokument größer als der Anzeigebereich, gibt es gegebenenfalls Rollbalken rechts und unten.

Um im Bedarfsfalle nochmal alles mit CSS umskalieren zu können, ist im umgebenden Element figure eine Klasse angegeben.

SVGs können allerdings auch direkt in das Dokument eingebettet werden. Eine Einbettung mittels object kann primär sinnvoll sein, wenn das SVG mehrfach verwendet wird.

Attribut type

Besonders bei exotischeren und proprietären Formaten, bei denen nicht davon ausgegangen werden kann, daß das Darstellungsprogramm für XHTML diese selber interpretiert, ist es ratsam, mit dem Attribut type den Inhaltstyp (ehemals MIME-Typ) des Formates anzugeben. Anhand dieser Angabe kann das Darstellungsprogramm dann bereits entscheiden, ob das object eingebettet angezeigt werden kann. Ist das für den angegebenen Typ nicht möglich, so wird das Darstellungsprogramm die Datei gar nicht erst laden und stattdessen mit dem Inhalt von object als Alternative weitermachen.

Der Wert von type ist also ein Inhaltstyp.

Generell werden diese Inhaltstypen zentral von IANA verwaltet und als Listen zur Verfügung gestellt. In der Liste stehen die Formate allerdings erst, wenn der formale Prozeß der Registrierung abgeschlossen ist, was länger dauern kann. Bei SVG hat dies zum Beispiel einige Jahre gedauert. In der Praxis werden daher auch bereits Inhaltstypen verwendet, bei denen die Registrierung noch nicht abgeschlossen ist, die aber jedenfalls bereits angemeldet sind.

Generell werden die Listen grob nach Anwendung aufgeteilt, also in die Inhaltstypen 'application', 'audio', 'example', 'image', 'message', 'model', 'multipart' 'text', 'video'. In jeder dieser Listen stehen dann weitere Untertypen, die den jeweiligen Formaten zugeordnet sind.

Zuerst wird der Inhaltstyp notiert, dann ein Schrägstrich /, dann der Untertyp.

Folgende Listen zeigen ein paar Beispiele.

Graphik:

SVG

image/svg+xml

JPEG

image/jpeg

PNG

image/png

GIF

image/gif

TIFF

image/tiff

Audio:

OGG (audio)

audio/ogg

MP3

audio/mpeg

MPEG-4

audio/mp4

3gpp (audio)

audio/3gpp

3gpp2 (audio)

audio/3gpp2

Video:

OGG (video)

video/ogg

MP4 (video)

video/mp4

MPEG

video/mpeg

3gpp (video)

video/3gpp

3gpp2 (video)

video/3gpp2

Quicktime

video/quicktime

Anwendungen:

XHTML

application/xhtml+xml

RDF

application/rdf+xml

SMIL

application/smil+xml

MathML

application/mathml+xml

XML

application/xml

PS

application/postscript

PDF

application/pdf

OGG

application/ogg

MP4

application/mp4

Text:

einfacher Text

text/plain

HTML

text/html

XML (alte Notation, neue siehe Anwendungen)

text/xml

Dann gibt es auch noch nicht angemeldete, experimentelle Formate, dort beginnt der Untertyp zur Kennzeichnung dieses Sachverhaltes mit einem x-. Die Zuordnung muß hier auch nicht eindeutig sein. Ein Darstellungsprogramm könnte also die Datei erstmal pauschal herunterladen, wenn irgendein Format zu dem als experimentell gekennzeichneten Inhaltsyp paßt und dann versuchen, dies darzustellen. Gelingt das nicht, wird anschließend zur Alternative gewechselt.

Hat man sich selbst ein XML-Format definiert, welches man 'My Own Markup Language' nennt, so kann man dem zum Beispiel selbst den Inhaltstyp 'application/x-moml+xml' verpassen, ohne den Typ offiziell registrieren lassen zu müssen. Wenn jemand anders allerdings das XML-Format 'Master Of Markup Language' definiert hat und dafür ebenfalls den Inhalttyp 'application/x-moml+xml' verwendet, ist dies nicht zu beanstanden und die Zuordnung ist nicht mehr eindeutig. Ein Darstellungsprogramm könnte allerdings am '+xml' erkennen, daß es sich zumindest um ein XML-Format handelt und dafür zumindest eine generische Anzeige bieten.

Beispiel flash-Anwendung:

<aside>
<figure>
<object data="/shopping/XTC13Werbung.swf" 
  type="application/x-shockwave-flash" 
  width="400" height="400">
Offenbar kann die Werbung im experimentellen Format 
application/x-shockwave-flash nicht eingebettet angezeigt werden.<br />
Trotzdem können Sie unser Produkt hier bestellen:<br />
<a href="/shopping/muelltuetenXTC13.xhtml">Geniale Designer-Einkaufshilfe 
XTC13 in limitierter Auflage</a>
</object>
<figcaption>Werbeeinblendung</figcaption>
</figure>
</aside>

Die Strategie ist in diesem Falle also, gleich zur Sache zu kommen, wenn das Werbfilmchen nicht angezeigt werden kann. Andere Formate als Alternative werden nicht in Betracht gezogen.

Beispiel SMIL einbetten:

<p>
Ich bin ganz überwältigt, 
wer mir alles ein Geburtstagsständchen geschickt hat, 
einfach mal anhören:
</p>
<ul>
<li>
<object data="smil/heiner/OdeAnKunigunde/" 
  type="application/smil+xml" width="400" height="100">
<a href="smil/heiner/OdeAnKunigunde/">Heiner 
 mit Katze Mauzi und Hund Wotan</a>
</object>
</li>
<li>
<object data="smil/kurt/OdeAnKunigunde/" 
  type="application/smil+xml" width="400" height="100">
<a href="smil/kurt/OdeAnKunigunde/">Kurt 
 und Anne-Liese mit den Kindlein Dietlinde und Hermeline</a>
</object>
</li>
<li>
<object data="smil/trulla/OdeAnKunigunde/" 
  type="application/smil+xml" width="400" height="100">
<a href="smil/trulla/OdeAnKunigunde/">Dörthe 
und Waldemar</a>
</object>
</li>
</ul>

SMIL verfügt auch über Möglichkeiten der Interaktion, von daher kann damit gegebenenfalls das Geburtstagsständchen per Interaktion abgespielt werden. Würden hingegen die Musikdateien einfach so eingebunden, würden gleich alle auf einmal losplärren. Per Element audio bietet HTML5 allerdings auch eine andere Möglichkeit, dies zu vermeiden und die Dateien nach Bedarf zu starten. In der Alternative könnte Kunigunde hier somit auch gleich auf die Musikdateien verweisen, sofern die SMIL-Dateien sonst keine spannenden Dinge enthalten wie etwa ein zusätzliches Video, eine Animation oder begleitenden Text.

Attribut typemustmatch

Sind sowohl data als auch type gesetzt, kann auch dieses Attribut verwendet werden. Nachdem das per data referenzierte Dokument angefordert wird, wird das Darstellungsprogramm dessen Inhaltstyp feststellen. Ist das Attribut gesetzt, so wird das referenzierte Dokument nur interpretiert, wenn der Inhaltstyp mit dem Wert von type übereinstimmt. Generell ist dies hilfreich, wenn Dokumente aus externen Quellen referenziert werden, weil bei solchen Autoren nicht unter Kontrolle haben, daß durch eine Änderung ein Angriff erfolgen könnte. Das Attribut ist natürlich nicht hinreichend, um das Publikum vor Angriffen zu schützen, daher ist es immer sinnvoll, lediglich lokale Quellen zu referenzieren, die komplett unter eigener Kontrolle stehen, dann erübrigt sich auch die Verwendung des Attributes. Das Attribut bietet also eigentlich keine zusätzliche Sicherheit, kann aber mit einer gewissen Wahrscheinlichkeit bereits groben Schabernack vermeiden.

Der Wert des Attributes ist leer oder 'typemustmatch'.

Attribut name

Wird object zusammen mit einem Formular verwendet, um Daten auszuwählen und zu übertragen, ist das Attribut name zu notieren, dies ist dann ein Steuerelementname, wie im Kapitel über Formulare genauer erläutert und auch nur in diesem Zusammenhang relevant.

Attribut form

Wird das object verwendet, um Formulardaten zu ermitteln, steht das object aber nicht innerhalb eines Formulars, so ist mit dem Attribut form anzugeben, zu welchem Formular es gehört.

Das gleichnamige Attribut gibt es auch für spezielle Formularelemente und wird in dem Zusammenhang genauer erläutert.

Element param

Mit dem innerhalb von object optional verwendbaren Element param können Parameter angegeben werden, welche dem von object referenzierten Dokument zur Darstellung übergeben werden. Alle Elemente param sind vor anderem Inhalt von object zu notieren.

Welche Parameter zu notieren sind und welche Werte diese haben, ist vom Format des referenzierten Dokumentes festzulegen. HTML selbst definiert keine Parameter, die für HTML-Dokumente zutreffen würden. SVG bis einschließlich Version tiny 1.2 definiert auch keine solchen Parameter, für Version 2 ist allerdings ein Modul vorgeschlagen, welches Parameter definieren soll. Andere Inhaltstypen wie java-applets oder flash-Dateien können einen allgemeinen Mechanismus definiert haben, mit denen alle übermittelten Parameter im Bedarfsfalle verarbeitet werden können.

param ist inhaltsleer und hat die spezifischen Attribute name, value. Beide Attribute müssen angegeben werden.

Attribute name und value

Mit dem Attribut name wird dem zu übergebenden Parameter ein Name gegeben. Der Wert ist einfacher Text. Was ein sinnvoller Name ist, hängt natürlich von der Anwendung ab, welcher der Parameter übergeben wird.

Mittels value wird der Wert des Parameters übergeben. Der Wert ist einfacher Text. Was ein sinnvoller Wert ist, hängt natürlich von der Anwendung ab, welcher der Parameter übergeben wird.

Beispiel: Einem java-applet, welches Bilder verzerrt, ist eine Pfadangabe zu einem Bild zu übergeben. Aufgrund des Wertes von type ruft das Darstellungsprogramm ein Programm oder eine Bibliothek oder Unterfunktion auf, welche die Programmiersprache java interpretiert. Mittels des Elementes 'param mit name 'code' wird dieser Abstraktionsstufe das java-applet übergeben, wobei value den Dateinamen (gegebenenfalls samt Pfadnamen, IRI/URI) enthält. Das ausgeführte java-applet wiederum analysiert die Pfadangabe im zweiten Element param selbst, um das Bild zu finden:

<object type="application/java"
 width="300" height="400">
<param name="code" value="Verzerrer.class" />
<param name="image" value="bilder/olaf2011.jpg" />
Kein Java aktiviert? Macht auch nichts …<br />
Zwar kann das Bild dann nicht manipuliert werden, <br />
aber immer noch angesehen:<br />
<img src="bilder/olaf2011.jpg" alt="Olaf im Jahre 2011" />
</object>

Beispiel flash:

<object type="application/x-shockwave-flash"
        data="flash/Lavalampe.swf
        width="400" height="800">
  <param name="movie" value="flash/lavalampe.swf" />
  <param name="quality" value="high"/><!-- high, medium, low -->
  <param name="opacity" value="0.7"/><!-- 0 bis 1 -->
  <param name="colour" value="#f00"/><!-- rgb hexadezimal 3 oder 6 -->
  <param name="strangeness" value="0.3"/><!-- -1 bis 1 -->
  <param name="flavour" value="-0.1"/><!-- -1 bis 1  -->
Keine flash-Interpretation aktiviert?<br /> 
Macht auch nichts …<br />
Statisches Bild einer Lavalampe:<br />
<img src="bilder/Lavalampe.jpg" alt="Lavalampe"
     width="400" height="800" />
</object>

Element embed

Dieses neu in HTML5 eingeführte Element sollte eigentlich gar nicht verwendet werden, stattdessen kommt object oder schlicht a zur Anwendung. HTML5 unterwirft sich damit lediglich einem Wildwuchs von schlecht durchdachten, proprietären Elementen, die früher einmal im Umlauf waren.

Ähnlich wie object kann embed andere Dokumente einbetten, hat allerdings als inhaltsleeres Element keine Möglichkeit, Alternativen anzubieten. Es kann da notiert werden, wo fließender Inhalt erwartet wird.

Es hat die spezifischen Attribute src, type, width und height mit definierter Bedeutung. Ferner dürfen Autoren bei dem Element nach eigenem Geschmack beliebige weitere Attribute notieren, welche allerdings keine definierte Bedeutung haben. Diese Attribute werden dem referenzierten Dokument übergeben und entsprechen der Funktionalität des Elementes param, wobei der Attributname der Name des Parameters ist und der Attributwert der Wert des Parameters.

Attribut src

Mit dem Attribut wird eine URI/IRI des zu referenzierenden Elementes angegeben. Sinngemäß gelten die Ausführungen zum gleichnamigen Attribut von img.

Attribute width und height

Wird mit embed ein Dokument eingebettet, welches Platz im Anzeigebereich benötigt, können zu dem Zwecke ähnlich wie bei img die Attribute width (Breite) und height (Höhe) notiert werden. Die dort gemachten Anmerkungen und Erläuterungen gelten entsprechend.

Der Wert ist jeweils eine Zahl als Angabe in Pixeln.

Attribut type

Mit dem Attribut kann der Inhaltstyp des referenziertes Dokumentes angegeben werden. Die Ausführungen zum gleichnamigen Attribut von object gelten entsprechend.

Element iframe

Ähnlich wie object dient iframe dazu, andere Dokumente einzubetten. Allerdings ist es auch möglich, iframe als Verweisziel anzugeben. Ansonsten liegt der Schwerpunkt bei der Einbettung von Formaten, welche das Darstellungsprogramm selbst interpretieren können sollte, also (X)HTML, SVG, Pixelbilder.

Das Element kann notiert werden, wo fließender Inhalt erlaubt ist. Das Inhaltsmodell ist problematisch. Bei XML-Syntax soll es leer sein, in der Markierungssuppenvariante darf es Text enthalten, welcher lediglich von Programmen präsentiert wird, welche das Element nicht kennen oder implementiert haben. Es handelt sich also nicht um eine Alternative für den Fall, daß das Format des referenzierten Dokumentes nicht interpretiert wird. Für diesen Fall ist unabhängig davon ein Zugang oder eine andere Alternative bereitzustellen.

Für das Element spezifische Attribute sind: src, srcdoc, name, sandbox, allowfullscreen, allowpaymentrequest, width, height, referrerpolicy.

Attribut src

Mit dem Attribut wird die URI/IRI des zu referenzierenden Dokumentes angegeben. Die Ausführungen zum gleichnamigen Attribut von img gelten sinngemäß.

Attribut srcdoc

Statt ein anderes Dokument mit src zu referenzieren, ist es auch möglich, solch ein Dokument, beziehungsweise seinen Quelltext gleich als Attributwert von srcdoc zu notieren. Anders als beim Pseudoprotokoll 'data:' handelt es sich aber nicht um eine URI/IRI, sondern wirklich um den Quelltext des Dokumentes, welches im iframe präsentiert werden soll.

Zu beachten ist dabei, daß Zeichen, die in Konflikt mit der Syntax von Attributwerten stehen, markiert werden müssen. Das trifft für den Attributwert insbesondere auf jene Anführungszeichen zu, die verwendet werden, um den Attributwert selbst zu umschließen. Ferner ist < zu maskieren, besser auch >. Bei & kann es gar notwendig sein, dies zweifach zu maskieren, was vom Zusammenhang abhängt. Dies liegt daran, daß der Attributwert zunächst als Attributwert interpretiert wird, wobei maskierte Zeichen konvertiert werden. Bevor allerdings das so erzeugte Dokument im iframe präsentiert wird, wird es abermals als Dokument interpretiert. Ein &, welches letztlich wirklich im Text stehen sollen, ist also im Attributwert zweifach zu maskieren.

Ferner kann es bei der XML-Notation Probleme mit Leerzeichen geben, wenn diese in der Ausgabe erhalten werden sollen, etwa in einem Element pre. Solche Leerzeichen sind dann ebenfalls zu maskieren, weil bei der Interpretation von Attributwerten Leerzeichen zu einfachen Leerzeichen konvertiert werden, mehrere aufeinanderfolgende zu einem einzigen.

Attribute width und height

Wird mit iframe ein Dokument eingebettet, welches Platz im Anzeigebereich benötigt, können zu dem Zwecke ähnlich wie bei img die Attribute width (Breite) und height (Höhe) notiert werden. Die dort gemachten Anmerkungen und Erläuterungen gelten entsprechend.

Der Wert ist jeweils eine Zahl als Angabe in Pixeln.

Attribut name

Mit dem Attribut wird dem iframe ein Name gegeben. Damit kann der iframe als Verweisziel eines Verweise mit dem Attribut target angesprochen werden. Der Attributwert entspricht also weitgehend dem eines id, soll aber sogar einzigartig in einem kompletten Projekt, praktisch in einer Unterdomäne sein, damit die Zuordnung eindeutig ist.

Attribut sandbox

Mit dem Attribut können Einschränkungen für das referenzierte Dokument notiert werden. Insbesondere wenn Dokumente aus externen Quellen referenziert werden, was eigentlich nie eine gute Idee ist, hat ein Autor nicht mehr die Kontrolle über die Inhalte. Die referenzierten Dokumente können insbesondere Skripte enthalten, die Daten ausspionieren oder sonstige Angriffe auf die Nutzer des Hauptdokumentes ausführen. Mit dem Attribut kann also angegeben werden, welche Funktionalitäten das Darstellungsprogramm beim referenzierten Dokument interpretieren darf. Weil es das Attribut bei älteren Versionen noch nicht gab, nicht implementiert sein muß, ist es kein Sicherheitsmerkmal im engeren Sinne. Sicherheitskritische Inhalte sollten immer unter voller Kontrolle der Autoren der Seite liegen, nicht vertrauenswürdige Quellen außerhalb der eigenen Kontrolle sollten gar nicht verwendet werden.

Ist das Attribut leer, ist nichts von dem erlaubt, was mit den folgenden Werten erlaubt werden kann. Mögliche Werte des Attributes:

allow-forms

Formulare werden erlaubt.

allow-pointer-lock

Ereignisse des Zeigergerätes (Maus etwa) werden übertragen.

allow-popups

Anzeigen von neuen Dokumenten in neuen Fenstern wird erlaubt.

allow-presentation

Inhalt darf getrennt auf einer anderen Anzeige ausgegeben werden.

allow-same-origin

Es wird so getan, als habe der referenzierte Dokument denselben Ursprung wie das referenzierende Dokument.

allow-scripts

Skripte werden erlaubt.

allow-top-navigation

Navigation auf oberster Ebene erlaubt, aus dem iframe heraus kann also das referenzierende Dokument selbst ersetzt werden.

Ferner können die Werte als Liste kombiniert werden, wobei jeder Wert maximal einmal vorkommen darf. Die Werte werden durch Leerzeichen voneinander separiert.

Zu beachten: Beim selben Ursprung und bei erlaubter Skriptinterpretation kann ein Skript im referenzierten Dokument das Attribut sandbox entfernen oder den Wert manipulieren. In der Kombination hat das Attribut also allenfalls noch dekorativen Wert.

Attribut allowfullscreen

Ist das Attribut notiert, darf der referenzierte Inhalt auf dem gesamten Anzeigebereich oder gar Bildschirm präsentiert werden. Das referenzierte Dokument könnte eine solche Funktion aufweisen, um solch eine Aktion auszulösen. Es ersetzt dabei nicht den aktuellen Inhalt, verdeckt ihn allerdings.

Der Wert ist entweder leer oder 'allowfullscreen'.

Attribut allowpaymentrequest

Ist das Attribut notiert, darf über eine spezielle Schnittstelle (Skript) ein Zahlungsvorgang abgewickelt werden. Während eines solches Vorganges fließen also zwischen Darstellungsprogramm und Schnittstelle (Skript) Daten, es stellt also hinsichtlich Privatsphäre und Datensicherheit ein eventuelles Leck dar, wenn das referenzierte Dokument nicht von einer garantiert vertrauenswürdigen Quelle ist.

Der Wert ist entweder leer oder 'allowpaymentrequest'.

Attribut referrerpolicy

Das Attribut gibt an, welche Strategie bei der Angabe eines Bezuges verwendet werden soll. Ein Bezug (englisch: to refer – auf etwas Bezug nehmen), hier also eine Spur hinterlassen, woher das Publikum auf eine Adresse gekommen ist. Das zusätzliche 'r' hat historische Gründe. Konkret geht es darum, daß ein Darstellungsprogramm bei einem Abruf eines Dokumentes von einem Dienstprogramm angeben kann, von welchem Dokument der Aufruf stattfand, wo also die Ressource für den Zugriff referenziert wurde.

Die Angaben zum gleichnamigen Attribut des Elementes a gelten sinngemäß einschließlich der Attributwerte.

Beispiele

<figure>
<iframe src="Sterntetraeder.svg" 
        width="600" height="600" 
        name="disp"
        allowfullscreen=""></iframe>
<figcaption>
<p>Animierte Graphiken:</p>
<ul>
<li><a href="Sterntetraeder.svg" target="disp">Sich räumlich drehender Sterntetraeder.</a></li>
<li><a href="Bubbelchen.svg" target="disp">Bubbelchen</a></li>
<li><a href="Wackelmann.svg" target="disp">Wackelmann</a></li>
<li><a href="Kurvenscharen.svg" target="disp">Kurvenscharen</a></li>
</ul>
</figcaption>
</figure>

<figure>
<iframe src="https://karten.example.org/karte.php?ort=Hannover" 
        width="600" height="600" 
        name="disp"
        sandbox="allow-forms allow-scripts"></iframe>
<figcaption>
Karten
</figcaption>
</figure>

Ansonsten bei Referenzierung von Inhalten aus anderen Quellen besser immer sandbox setzen:

<aside>
<iframe src="https://dubios.example.com/werbung.php" 
        sandbox=""  
        width="600" height="600" ></iframe>
</aside>

Beispiel mit srcdoc:

<iframe width="600" height="200"
        name="dummy" 
        srcdoc="&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
&lt;html xmlns='http://www.w3.org/1999/xhtml'
      xml:lang='de'&gt;
  &lt;head&gt;
    &lt;title&gt;Eingebettetes Objekt&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Eingebettetes Objekt&lt;/h1&gt;
   
    &lt;p&gt;
Dies ist ein eingebettetes Objekt.
    &lt;/p&gt;
    
&lt;h2&gt;Objekte auswählen:&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a target='dummy' href='o1.xhtml'&gt;Objekt 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target='dummy' href='o2.xhtml'&gt;Objekt 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target='dummy' href='o3.xhtml'&gt;Objekt 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a target='dummy' href='o4.xhtml'&gt;Objekt 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
    
  &lt;/body&gt;
&lt;/html&gt;" ></iframe>

Zurück zu Bilder, Graphiken, Videos und Audios | Hoch zum Inhaltsverzeichnis | Vor zu Verweissensitive Graphiken