Was ist ein iframe?

Ein <iframe> (Inline-Frame) ist ein HTML-Element, das eine andere Webseite oder ein Dokument in die aktuelle Seite einbettet. Es erstellt einen separaten Browsing-Kontext in einem rechteckigen Bereich der Seite und ermöglicht es, Inhalte von einer anderen URL – wie eine Karte, ein Video oder ein Widget eines Drittanbieters – anzuzeigen, ohne dass der Benutzer die Seite verlässt.

Iframes werden häufig verwendet, um YouTube-Videos, Google Maps, Zahlungsformulare, Social-Media-Widgets und Werbebanner einzubetten. Da eingebettete Inhalte in ihrem eigenen Kontext ausgeführt werden, ermöglichen Attribute wie sandbox und allow Entwicklern, genau zu kontrollieren, was die eingebettete Seite tun darf.

Werkzeugbeschreibung

Dieses Tool generiert einsatzbereiten <iframe> HTML-Code aus einem einfachen Formular. Konfigurieren Sie die Quell-URL, Abmessungen, Scroll-Verhalten, Laststrategie, Berechtigungen und Sandbox-Einschränkungen, und das Tool gibt sofort das entsprechende Tag aus. Es ist keine manuelle Attribut-Eingabe oder Auswendiglernen der Sandbox-Flag-Syntax erforderlich.

Beispiele

Minimales iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Lazy-loaded iframe mit Sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe mit Kamera- und Mikrofonberechtigungen:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Funktionen

  • Generiert validen <iframe> Code aus einem visuellen Formular – keine HTML-Kenntnisse erforderlich
  • Vollständige Kontrolle über Berechtigungen (allow) und Sandbox-Einschränkungen
  • Live-Vorschau aktualisiert sich bei jeder Änderung einer Option

Optionen erklärt

Option Beschreibung
URL Das src Attribut – die Adresse der einzubettenden Seite
Breite / Höhe Pixelabmessungen des iframe
Titel Zugängliches Label (title Attribut) für Bildschirmleser
Name Das name Attribut, verwendet als Link-Ziel
Scrolling Steuert die Scrollleiste: automatisch, immer an oder immer aus
Laden eager lädt sofort; lazy verzögert bis zur Nähe des Viewports
Vollbild erlauben Fügt allowfullscreen hinzu, damit der eingebettete Inhalt Vollbild nutzen kann
Rahmen Wenn deaktiviert, fügt style="border: none;" hinzu, um den Standardrahmen zu entfernen
Features erlauben Gewährt der eingebetteten Seite spezifische Browser-API-Berechtigungen
Sandbox-Flags Beschränkt, was die eingebettete Seite tun kann; jedes Flag reaktiviert eine bestimmte Funktion

Tipps

  • Geben Sie immer ein title Attribut für Barrierefreiheit an – Bildschirmleser kündigen es an, wenn der iframe fokussiert wird.
  • Verwenden Sie loading="lazy" für iframes unterhalb des Viewports, um die Seitenladeleistung zu verbessern.
  • Das Hinzufügen des sandbox Attributs ohne Flags sperrt den Inhalt vollständig; fügen Sie nur die Flags hinzu, die Sie tatsächlich benötigen.