Tag <iframe>

Tag <iframe>

Definition

Status: Aktueller Standard

Das Tag <iframe> steht für inline frame (eingebetteter Rahmen).

Das <iframe>-Element (Inline Frame) bettet ein zweites HTML-Dokument direkt in die aktuelle Seite ein. Es ist heute die Standardmethode, um externe Inhalte wie YouTube-Videos, Karten oder Widgets sicher zu laden. Es erzeugt einen verschachtelten Browsing Context mit eigenem DOM, eigener History und eigener JavaScript-Umgebung. Einfach ausgedrückt: Es öffnet einen komplett eigenen Browserbereich im aktuellen Dokument.

Syntax

<iframe src="Zieldokument"></iframe>

Attribute bzw. Unterelemente

src

Pfad zum einzubindenden Dokument

srcdoc

Inline-HTML direkt im Attribut

width

Breite des Fensters (besser in css!)

height

Höhe des Fensters (besser in css!)

loading

Lademodus (eager/lazy). lazy = "Erst laden wenn im sichtbaren Bereich")

name

Name des Fenster (für Aufrufe mit target (<a href="seite.html" target="meinFrame">Laden</a>

sandbox

Beschränkt Fähigkeiten des eingebetteten Inhalts (Sicherheitsaspekt)

allow

Definiert, was gezeigt werden darf:
camera: Zugriff auf Kamera
microphone: Zugriff auf Mikrofon
geolocation: Zugriff auf Standort
fullscreen: Vollbild erlaubt (statt allowfullscreen)
payment: Payment Request API für Zahlungen
autoplay: Automatische Abspielen (Audio, Video)

referrerpolicy

Kontrolliert Referrer-Header (z.B.: referrerpolicy="no-referrer")

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <iframe> - Youtube-Video einbinden

Der Code:

<iframe
  width="450"
  height="300"
  src="https://www.youtube.com/embed/XC_jMFJBmJQ" 
  title="Mein erster Tandemsprung"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media;
  gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Ergebnis:

Ergebnis: <iframe>-Demo 1
Youtube-Video einbinden

Klassisches Beispiel: Einbinden eines Youtube-Videos...

Beispiel <iframe> - Wikipedia einbinden

Der Code:

<iframe
  width="450"
  height="300"
  src="https://de.wikipedia.org">
</iframe>

Ergebnis:

Ergebnis: <iframe>-Demo 2
Wikipedia einbinden

Andere Webseite einbinden