HTML <iframe>-Tag
Das <iframe>-Tag erstellt einen Inline-Frame zum Einbetten von Inhalten Dritter (Medien, Applets usw.). Obwohl der Inhalt des Frames und die Webseite unabhängig voneinander sind, können sie über JavaScript interagieren.
Syntax
Das <iframe>-Tag ist ein normales HTML-Element, das ein schließendes Tag erfordert.
Beispiel für ein HTML <iframe>-Tag:
Beispiel für das HTML <iframe>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com"></iframe>
</body>
</html>Um die Größe des Iframes festzulegen, verwenden Sie die Attribute height und width oder CSS. Die Attributwerte werden standardmäßig in Pixeln angegeben, können aber auch in Prozent angegeben werden.
Beispiel für ein HTML <iframe>-Tag mit den Attributen height und width:
Beispiel für das HTML <iframe>-Tag mit einem height-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
</body>
</html>Moderne Browser wenden standardmäßig keinen Rahmen auf Iframes an. Sie können dennoch die CSS border-Eigenschaft verwenden, um den Frame nach Bedarf zu gestalten.
Beispiel für ein HTML <iframe>-Tag mit der CSS border-Eigenschaft:
Beispiel für das HTML <iframe>-Tag mit einem style-Attribut
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300" style="border: none"></iframe>
</body>
</html>Das neue loading-Attribut
Es gibt ein neues HTML loading-Attribut, das das Laden von Bildern und Iframes verzögert, bis sie in der Nähe des Anzeigebereichs liegen. Für diese Funktion gibt es einen Pull-Request der WHATWG, und sie ist bereits Teil von Chromium (ab v76).
Zu den unterstützten Werten für das loading-Attribut gehören:
"lazy", das das Laden verzögert, bis das Bild oder der Iframe einen bestimmten Abstandsschwellenwert zum Ansichtsfenster erreicht."eager", das die Ressource sofort lädt.
Sie können den Wert lazy verwenden, um von der browserinternen verzögerten Ladefunktion (Lazy Loading) zu profitieren:
HTML <iframe>-Tag
<iframe src="video-player.html" loading="lazy"></iframe>Lazy Loading ist eine Reihe von Techniken in der Web- und Anwendungsentwicklung, die das Laden von Ressourcen auf einer Seite auf einen späteren Zeitpunkt verschieben, an dem diese Ressourcen tatsächlich benötigt werden, anstatt sie vorab zu laden. Diese Techniken helfen dabei, die Leistung zu verbessern, die Ressourcen des Geräts besser zu nutzen und damit verbundene Kosten zu senken.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | left right top bottom middle | Legt fest, wie Text um den Frame herum ausgerichtet und umgebrochen wird. In HTML5 nicht unterstützt. |
| allow | string | Legt eine Richtlinie fest, die bestimmte Funktionen im Iframe erlaubt oder einschränkt. |
| allowfullscreen | Definiert, dass der Frame im Vollbildmodus geöffnet werden kann. | |
| frameborder | 1 0 | Definiert, ob der Rahmen um den Iframe angezeigt werden soll oder nicht. In HTML5 nicht unterstützt. |
| height | pixels | Definiert die Höhe des Frames (Standardhöhe 150px). |
| longdesc | URL | Definiert eine Seite mit einer langen Beschreibung des Inhalts. In HTML5 nicht unterstützt. |
| marginheight | pixels | Definiert den oberen und unteren Abstand des Frames. In HTML5 nicht unterstützt. |
| marginwidth | pixels | Definiert den linken und rechten Abstand des Frames. In HTML5 nicht unterstützt. |
| name | text | Definiert den Namen des Frames. |
| referrerpolicy | URL | Legt fest, welche Referrer-Informationen mit der Anfrage gesendet werden sollen. |
| sandbox | Fügt zusätzliche Einschränkungen für den Inhalt innerhalb des Frames hinzu. | |
"" – Wendet alle Einschränkungen an.<br>allow-forms – Erlaubt das Absenden von Formularen oder einer eingebetteten Seite.<br>allow-same-origin – Betrachtet das angehängte Dokument als von derselben Quelle wie das übergeordnete Dokument heruntergeladen.<br>allow-scripts – Ermöglicht die Ausführung von Skripten auf einer verschachtelten Seite.<br>allow-top-navigation – Ermöglicht den Inhalten des angehängten Dokuments, auf Elemente der obersten Ebene (Dokumente, Fenster) zuzugreifen. | ||
| scrolling | yes no auto | Definiert, ob die Bildlaufleiste angezeigt werden soll oder nicht. In HTML5 nicht unterstützt. |
| seamless | seamless | Legt fest, dass der Inhalt des angehängten Dokuments als Teil des übergeordneten Dokuments angezeigt werden soll. |
| src | URL | Legt die Adresse des Dokuments fest, dessen Inhalt in den Frame geladen wird. |
| srcdoc | HTML_code | Speichert den Inhalt des Frames direkt im Attribut. |
| width | pixels | Definiert die Breite des Frames. (Standardbreite ist 300px). |
Das <iframe>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Praxis
Welche Attribute hat ein HTML iFrame-Tag?