HTML-Tag <iframe>

❮ Vorige Nächste ❯

Das Tag <iframe> erstellt einen eingebauten Bereich (Frame), wo man den Inhalt eines anderen Dokuments oder anderer Webseite anzeigen kann. Der Inhalt des Frames und der Webseite hängen voneinander nicht ab, aber sie können durch JavaScript zusammenwirken.

Nicht alle Browser unterstützen den Frame. In diesem Fall ist es notwendig, einen alternativen Text einzugeben, falls der Browser den Inhalt des Frames nicht darstellen kann, wird dem Benutzer dieser Taxt angezeigt.

Das Attribut src ist fürs Tag <iframe> notwendig. Es definiert die URL des Dokuments, die im Rahmen angezeigt werden muss.

Syntax

Der Inhalt des Tages wird zwischen den Start- (<iframe>) und Endtags (</iframe>) platziert.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <iframe src="https://de.w3docs.com"></iframe>
  </body>
</html>

Versuch es selber!

Ergebnis

Um die Größe von iframe einzustellen, können Sie die Attribute height und width oder CSS verwenden. Die Attributwerte sind voreingestellt in Pixel angegeben, können aber auch in Prozent angegeben werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <iframe src="https://de.w3docs.com" width="80%" height="300"></iframe>
  </body>
</html>

Versuch es selber!

Ergebnis

Voreingestellt hat ein Iframe einen Rand um ihn herum. Um den Rand zu entfernen, können Sie das Attribut style und oder die CSS-Eigenschaft border verwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <iframe src="https://de.w3docs.com" width="80%" height="300" style="border: none"></iframe>
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Attribut	Wert	Beschreibung
align	left right top bottom middle	Es definiert den Typ des Ausgleichs und der Anpassung des Frames mit dem Text. Es wird in HTML5 nicht unterstützt.
allowfullscreen		Es definiert, dass der Frame im Vollbildmodus geöffnet werden muss.
frameborder	1 0	Es bestimmt, ob der Frame in einem Rahmen angezeigt werden soll oder nicht. Es wird in HTML5 nicht unterstützt.
height	pixels	Es definiert die Höhe des Frames (voreingestellt 150 pix).
longdesc	URL	Es enthält einen Link für ausführliche Beschreibung der dem Frame beigefügten Seite. Es wird in HTML5 nicht unterstützt.
marginheight	pixels	Es definiert die oberen und unteren Grenzen des Frames. Es wird in HTML5 nicht unterstützt.
marginwidth	pixels	Es definiert die linken und rechten Grenzen des Frames. Es wird in HTML5 nicht unterstützt.
name	text	Es definiert den Namen des Frames.
sandbox
		Es bestimmt die Beschränkungen des im Frame hinzugefügten Inhalts.
	""	Es wendet alle Beschränkungen an.
	allow-forms	Es erlaubt die Sendung der Form auf der beigefügten Seite.
	allow-same-origin	Es akzeptiert das beigefügte Dokument als ein aus derselben Quelle beladenes Dokument wie das Parentdokument.
	allow-scripts	Es erlaubt die Ausführung von Skripten auf beigefügter Seite.
	allow-top-navigation	Es erlaubt den Inhalt des beigefügten Dokuments, zu den Elementen der oberen Level (Dokumente, Fenster) Zugang zu haben.
scrolling	yes no auto	Es bestimmt, ob die Rolllinie angezeigt werden soll oder nicht. Es wird in HTML5 nicht unterstützt.
seamless	seamless	Es bestimmt, dass der Inhalt es beigefügten Dokuments als ein Teil des Parentdokuments angezeigt werden soll.
src	URL	Es deutet auf die Adresse des Dokuments, dessen Inhalt im Frame beladen werden soll.
srcdoc	HTML_code	Es speichert den Inhalt des Frames unmittelbar im Attribut.
width	pixels	Es definiert die Breite des Frames. (voreingestellt 300px)