iFrames ermöglichen so beispielsweise Rechner, Konfiguratoren, Wetteranzeige etc. aus anderen Quellen als passenden inhaltliches Element in eine andere Webseite einzubinden. Optisch ist das nicht zwingend immer erkennbar. Bei fremden Quellen sind die Hürden eher datenschutzrechtlicher Natur, erkennbar an einer vorgeschalteten Einwilligungsbitte.
Definition iFrame
Inhaltsübersicht
Inhaltsübersicht
Verwendung und Beispiele iFrame
iFrames werden häufig verwendet, um Inhalte wie Videos, interaktive Widgets, Karten oder eingebettete Formulare von Drittanbietern in Webseiten einzubetten. Beispielsweise kann ein Video von YouTube mithilfe eines iFrames in eine Webseite eingebettet werden, ohne dass der Benutzer die Webseite verlassen muss.
Beispiel Einbettung (mit HTML-Code) iFrame
<!DOCTYPE html>
<head>
<title>iFrame Beispiel</title>
</head>
<body>
<h1>Beispiel für die Einbettung eines iFrames</h1>
<iframe src="https://www.example.com/" width="500" height="300"></iframe>
<p>Einbetten einer externen Webseite mithilfe eines iFrames</p>
</body>
</html>
In diesem Beispiel wird eine externe Webseite (https://www.example.com/) in einem iFrame eingebettet. Du kannst die URL im src-Attribut durch die gewünschte Webseite ersetzen. Die width- und height-Attribute steuern die grundsätzlichen Abmessungen des iFrames, die je nach Anzeigegröße dynamisch angepasst werden können.
Der von YouTube vorgeschlagene Einbettungscode eines YouTube-Videos sieht so aus.
<iframe width="560" height="315" src="https://www.youtube.com/embed/MAlasVMRR_A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Eigenschaften iFrame
1
Eingebettete Inhalte
iFrame ermöglichen das Einbetten von externen Inhalten wie Webseiten, Videos, Karten und Widgets in eine Hauptwebseite.
2
Nahtlose Integration
Der eingebettete Inhalt wird nahtlos in die Hauptwebseite integriert, ohne dass die gesamte Seite neu geladen werden muss.
3
Unabhängige Darstellung
Der Inhalt im iFrame wird von der Hauptseite isoliert dargestellt, wodurch eine getrennte Darstellung und Interaktion ermöglicht wird.
Vorteile iFrame
- Einfache Integration: iFrames ermöglichen eine einfache Integration von externen Inhalten in Webseiten, ohne dass umfangreiche Änderungen am Quellcode erforderlich sind.
- Separate Inhalte: Externe Inhalte werden in einem iFrame getrennt von der Hauptseite geladen, was die Leistung und die Benutzererfahrung verbessert.
- Dynamische Aktualisierung: Änderungen im eingebetteten Inhalt (z. B. ein aktualisiertes Video) werden automatisch im iFrame auf der Webseite angezeigt.
FAQ Häufige Fragen zu iFrame
Wie macht man ein iFrame mit 100% Breite und Höhe?
Um ein iFrame auf 100% Breite und Höhe anzuzeigen, kannst du den folgenden HTML-Code verwenden:
<iframe src="https://www.example.com" width="100%" height="100%" frameborder="0"></iframe>
Dieser Code stellt sicher, dass das iFrame die gesamte verfügbare Breite und Höhe des Elternelements einnimmt, in dem es eingebettet ist.
Was ist ein iFrame?
Ein iFrame (Inline Frame) ist ein HTML-Element, das es ermöglicht, externe Inhalte wie Webseiten, Videos oder Widgets nahtlos in eine Webseite einzubetten, ohne die gesamte Seite neu zu laden.
Quellen, weiterführende Links
Bei Erstellung und Formulierung dieser Inhalte hat uns künstliche Intelligenz unterstützt. Vor Veröffentlichung durch den unten genannten Autor wurden alle Angaben fachlich überprüft, ggf. korrigiert und ergänzt.
Autor
Teresa Mayr
Suche
