Was ist ein iFrame?

Ein iFrame oder Inline Frame ist ein HTML-Element, mit dem Sie ein anderes HTML-Dokument in die aktuelle Webseite einbetten können.

Was ist ein iFrame?

Ein iFrame, kurz für Inline Frame, ist ein HTML Element, das das Einbetten eines externen HTML-Dokuments in die Grenzen eines anderen HTML-Dokuments ermöglicht. Im Wesentlichen fungiert es als Fenster, das Inhalte von einer anderen Webseite oder Ressource anzeigen kann und dabei Teil der aktuellen Webseite bleibt. iFrames werden häufig für verschiedene Zwecke verwendet, beispielsweise zum Integrieren von Videos, interaktiven Karten, Werbung oder anderen dynamischen Inhalten in eine Website, ohne dass Benutzer die angezeigte Seite verlassen müssen.

Wie funktioniert ein iFrame?

Ein iFrame bettet ein externes HTML-Dokument oder andere Webinhalte in die aktuelle Webseite ein. Hier ist eine Schritt-für-Schritt-Erklärung, wie dieser Prozess funktioniert:

1. Einfügen des iFrame-Elements. Der Prozess beginnt damit, dass der Entwickler ein Tag zum HTML der Webseite. Dieser Tag enthält Attribute wie src, das die URL des einzubettenden externen Inhalts und andere optionale Attribute wie Breite, Höhe, Rahmenrand und Vollbild zulassen, um das Erscheinungsbild und Verhalten des iFrame zu steuern.
2. Anfordern der externen Absicht. Sobald der Benutzer Browser lädt die Webseite, die das iFrame enthält, liest der Browser das src-Attribut im Tag und macht eine separate HTTP Anfrage an die angegebene URL, um den Inhalt abzurufen.
3. Der externe Inhalt wird geladen. Der Browser ruft den externen Inhalt ab, der ein vollständiges HTML-Dokument, eine Mediendatei oder eine beliebige Webressource sein kann. Der Inhalt wird als unabhängiges Dokument innerhalb der Hauptwebseite behandelt. Das iFrame erstellt im Wesentlichen ein Mini-Browserfenster innerhalb der übergeordneten Webseite und lädt und rendert den Inhalt, als wäre es eine eigenständige Webseite.
4. Rendern des Inhalts. Der Browser zeigt den Inhalt dann innerhalb der Grenzen des iFrame an. Der eingebettete Inhalt erscheint, als wäre er Teil der Hauptwebseite, funktioniert aber unabhängig davon. Die übergeordnete Seite und der iFrame-Inhalt interagieren nicht direkt, obwohl sie denselben visuellen Raum teilen.
5. Interaktion und Funktionalität. Benutzer interagieren mit dem Inhalt innerhalb des iFrames wie mit jeder anderen Webseite. Wenn der iFrame beispielsweise ein Formular enthält, können Benutzer es ausfüllen und abschicken. Der eingebettete Inhalt kann eigene JavaScript, CSS, und andere Ressourcen, die im iFrame-Kontext getrennt von der übergeordneten Seite ausgeführt werden.
6. Unabhängiger Dokumentlebenszyklus. Der eingebettete Inhalt im iFrame hat einen eigenen Dokumentlebenszyklus. Das bedeutet, dass er geladen, ausgeführt und Skripteund interagiert unabhängig von der übergeordneten Seite mit seinen eigenen Ressourcen. Wenn beispielsweise die übergeordnete Seite neu geladen wird, wird auch der iFrame-Inhalt neu geladen, aber sein Status und Verhalten werden getrennt vom Hauptdokument verwaltet.
7. Sicherheit und Einschränkungen. Aufgrund potenzieller Sicherheitsrisiken implementieren Browser verschiedene Einschränkungen für iFrame-Inhalte. Beispielsweise verhindern Cross-Origin-Richtlinien, dass Skripte auf der übergeordneten Seite auf Inhalte innerhalb eines iFrames von einer anderen Seite zugreifen. DomainDarüber hinaus verwenden Entwickler Sicherheitsheader und -attribute wie Sandkasten um die Möglichkeiten des iFrame-Inhalts weiter einzuschränken, beispielsweise durch Deaktivieren von Skripts oder Verhindern der Übermittlung von Formularen.

Attribute eines iFrames

Der Ein Element in HTML hat mehrere Attribute, die sein Verhalten, sein Erscheinungsbild und seine Interaktion mit dem angezeigten Inhalt steuern. Hier ist eine detaillierte Erklärung der wichtigsten Attribute:

• Quelle. Dieses Attribut gibt die URL des externen Inhalts an, der in das iFrame eingebettet werden soll. Es ist das wichtigste Attribut, da es bestimmt, welcher Inhalt in das iFrame geladen wird. Beispiel: bettet den Inhalt von „https://www.example.com“ in das iFrame ein.
• Breite und Höhe. Diese Attribute steuern die Größe des iFrames in Pixeln oder Prozent. Zum Beispiel: erstellt ein iFrame mit einer Breite von 600 Pixeln und einer Höhe von 400 Pixeln.
• Rahmenrand. Dieses Attribut gibt an, ob das iFrame einen Rahmen haben soll. Der Wert 0 bedeutet keinen Rahmen, während 1 einen sichtbaren Rahmen bedeutet. Dieses Attribut gilt mittlerweile als veraltet, da modernes CSS die bevorzugte Methode zum Gestalten des iFrame-Rahmens ist.
• Scrollen. Dieses Attribut steuert die Sichtbarkeit von Bildlaufleisten innerhalb des iFrames. Es kann drei Werte annehmen: yes, no oder auto. yes erzwingt das Erscheinen von Bildlaufleisten, no verhindert sie und auto lässt das Erscheinen von Bildlaufleisten nur bei Bedarf zu. Beispiel: verhindert die Anzeige von Bildlaufleisten, selbst wenn der Inhalt größer als das iFrame ist.
• Sandkasten. Dieses leistungsstarke Attribut ermöglicht eine Reihe zusätzlicher Einschränkungen für den Inhalt des iFrames, um die Sicherheit zu erhöhen. Es kann verwendet werden, um Skripte zu deaktivieren, das Senden von Formularen zu verhindern, die Verwendung von Plugins zu blockieren und andere potenziell riskante Verhaltensweisen einzuschränken. Der Wert dieses Attributs kann eine durch Leerzeichen getrennte Liste von Einschränkungen sein, z. B. „Skripte zulassen“, „Formulare zulassen“, „gleiche Herkunft zulassen“ usw. Beispiel: würde die Ausführung von Skripten innerhalb des iFrames ermöglichen, allerdings mit anderen Einschränkungen.
• ermöglichen. Das allow-Attribut gibt eine Funktionsrichtlinie für den Inhalt des iFrames an. Dies steuert Berechtigungen für Dinge wie Kamerazugriff, Geolokalisierung, Vollbildmodus und mehr. Auf diese Weise können Sie dem Inhalt im iFrame bestimmte Browserfunktionen explizit gewähren oder verweigern. Zum Beispiel: ermöglicht dem Inhalt nur den Zugriff auf die Geolokalisierung für denselben Ursprung und deaktiviert den Kamerazugriff vollständig.
• Namen. Dieses Attribut weist dem iFrame einen Namen zu, was nützlich sein kann, um es mit Links oder Skripten anzusprechen. Beispielsweise öffnet ein Link mit target="iframe_name" den verknüpften Inhalt innerhalb des benannten iFrames. Dies ist insbesondere in Situationen nützlich, in denen mehrere iFrames auf einer Seite vorhanden sind.
• Quelldoc. Mit diesem Attribut können Sie HTML-Inhalte direkt in das iFrame einbetten, anstatt sie aus einer externen Quelle zu laden. Es ist nützlich, um kleine Teile von HTML-Inhalten einzubetten, ohne dass eine separate Datei erforderlich ist. Beispiel: Hello, world!"> würde „Hallo Welt!“ innerhalb des iFrame anzeigen.
• Referrer-Richtlinie. Dieses Attribut steuert die Menge an Referrer-Informationen, die beim Abrufen der Quell-URL gesendet werden sollen. Es hilft bei der Verwaltung von Datenschutz- und Sicherheitsbedenken im Zusammenhang mit Referrer-Daten. Die Werte können „no-referrer“, „origin“, „strict-origin“ usw. sein und bestimmen, wie viel von der URL der Originalseite mit dem eingebetteten Inhalt geteilt wird.
• Wird geladen. Das Ladeattribut gibt an, ob das iFrame sofort oder verzögert geladen werden soll. Die Werte können „eager“ sein, wodurch das iFrame so schnell wie möglich geladen wird, oder „lazy“, wodurch das Laden verzögert wird, bis sich das iFrame in der Nähe des Ansichtsfensters befindet. Dies verbessert die Leistung und das Benutzererlebnis durch die Reduzierung der anfänglichen Ladezeit.
• Referrer-Richtlinie. Dieses Attribut legt die Referrer-Richtlinie für Anfragen fest, die vom Iframe gestellt werden. Dies hat Auswirkungen auf die Menge an Informationen über die verweisende Seite, die an den Inhalt des Iframes gesendet wird. Zu den Optionen gehören „no-referrer“, „origin“, „same-origin“ und „strict-origin“.
• csp. Mit dem Attribut csp (Content Security Policy) kann der Entwickler eine Content Security Policy speziell für den Inhalt des iFrames festlegen. Dadurch werden bestimmte Sicherheitsmaßnahmen erzwungen, z. B. welche Inhaltsquellen geladen werden dürfen. Dies kann bestimmte Arten von Angriffen wie Cross-Site-Scripting (XSS) verhindern.

Wofür werden iFrames verwendet?

iFrames werden in der Webentwicklung für verschiedene Zwecke verwendet, vor allem um externe Inhalte in eine Webseite einzubetten und dabei einen separaten Kontext für diese Inhalte beizubehalten. Hier sind einige gängige Anwendungsfälle:

• Einbetten von Videos. iFrames werden häufig verwendet, um Videos von Plattformen wie YouTube, Vimeo oder anderen Video-Hosting-Diensten einzubetten. So können Benutzer Videos direkt auf einer Website ansehen, ohne die Seite verlassen zu müssen. Der eingebettete Videoplayer mit Steuerelementen wird innerhalb des iFrames geladen.
• Karten integrieren. iFrames werden häufig verwendet, um interaktive Karten von Diensten wie Google Maps oder OpenStreetMap einzubetten. Dies bietet Benutzern die Möglichkeit, Karten direkt auf der Webseite anzuzeigen und mit ihnen zu interagieren, was besonders nützlich ist, um Standorte, Wegbeschreibungen und andere geografische Daten anzuzeigen.
• Anzeige externer Webseiten oder Dokumente. iFrames ermöglichen die Einbindung ganzer Webseiten oder Dokumente von anderen Webseiten. Dies wird häufig verwendet, um Inhalte wie Servicebedingungen, Datenschutzrichtlinien oder andere externe Dokumente anzuzeigen, ohne dass Benutzer die aktuelle Site verlassen müssen.
• Laden von Widgets und Plugins von Drittanbietern. Viele Dienste von Drittanbietern, wie z. B. Social-Media-Plattformen, Chat-Tools für den Kundensupport und Werbenetzwerke, bieten Widgets an, die mithilfe von iFrames eingebettet werden können. Auf diese Weise können Websites Funktionen wie Facebook-Kommentare, X-Feeds oder Live-Chat-Support integrieren, ohne dass umfangreiche Backend-Entwicklung.
• Hosting-Werbung. iFrames werden häufig verwendet, um Werbung auf Webseiten einzubetten. Werbenetzwerke stellen oft iFrame-basierte Werbe-Tags bereit, die dabei helfen, den Anzeigeninhalt vom Rest der Seite zu isolieren und so Konflikte zwischen dem Code der Anzeige und dem Code der Seite zu vermeiden.
• Isolieren von Inhalten aus Sicherheitsgründen. Mit iFrames können Inhalte aus externen Quellen eingebettet und gleichzeitig von den Skripten und Stilen der übergeordneten Seite isoliert werden. Dies ist besonders nützlich, um Sicherheitsgrenzen einzuhalten, da dadurch verhindert wird, dass potenziell unsichere Inhalte die Hauptseite beeinträchtigen.
• Testen und Vorschau von Inhalten. Entwickler verwenden iFrames häufig zum Testen oder zur Vorschau von Inhalten aus einem Entwicklungsumgebung auf einer Live-Site. Dies ermöglicht einen einfachen Vergleich und Tests, ohne den Inhalt vollständig in die Site zu integrieren.
• Anzeige von responsivem Inhalt. Mit iFrames können responsive Inhalte angezeigt werden, die sich an unterschiedliche Bildschirmgrößen anpassen, wie etwa responsive Webseiten oder Anwendungen. Dies ist nützlich, um sicherzustellen, dass eingebettete Inhalte auf allen Geräten zugänglich und visuell konsistent sind.
• Einbetten von Formularen und interaktiven Tools. iFrames werden verwendet, um Formulare, Umfragen, Rechner und andere interaktive Tools aus externen Quellen einzubetten. Dadurch können Websites komplexe Funktionen anbieten, ohne diese Tools von Grund auf neu entwickeln zu müssen.
• Domänenübergreifende Einbettung. Wenn Inhalte aus einer anderen Domäne eingebettet werden müssen, bieten iFrames eine Methode, dies zu tun und gleichzeitig die Trennung der Ursprungskontexte beizubehalten. Dies ist insbesondere für Inhalte nützlich, die auf einer anderen server oder Domäne, was eine einfachere Verwaltung und Bereitstellung ermöglicht.

iFrame Beispiele

Hier sind zwei Beispiele für die Verwendung von iFrames.

Beispiel 1: Einbetten eines YouTube-Videos

Dieses Beispiel zeigt, wie ein YouTube-Video mithilfe eines iFrames in eine Webseite eingebettet wird.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame YouTube Example</title>

</head>

<body>

    <h1>Watch this Video:</h1>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

    </iframe>

</body>

</html>

Erläuterung:

• Das src-Attribut wird auf die URL des YouTube-Videos gesetzt. In diesem Fall handelt es sich um ein Beispielvideo.
• Die Attribute „Width“ und „Height“ definieren die Größe des Videoplayers.
• Das allow-Attribut gibt Berechtigungen für Funktionen wie Autoplay an, verschlüsselt Medien und Vollbild.
• Das Attribut „allowfullscreen“ ermöglicht die Anzeige des Videos im Vollbildmodus.

Beispiel 2: Einbetten einer Google-Karte

Dieses Beispiel zeigt, wie eine Google-Karte mithilfe eines iFrames in eine Webseite eingebettet wird.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame Google Map Example</title>

</head>

<body>

    <h1>Our Location:</h1>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096274!

    2d144.95373631531565!3d-37.81720997975142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!

    1s0x6ad65d43f1a5d53b%3A0x1aaf3d5a5b64db5e!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1617174192722!5m2!

    1sen!2sau"

    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</body>

</html>

Erläuterung:

• Das src-Attribut enthält die von Google Maps bereitgestellte URL zum Einbetten der Karte. Die URL enthält bestimmte Parameter, die den Standort und die Anzeigeeinstellungen bestimmen.
• Die Attribute „Width“ und „Height“ definieren die Größe der Karte auf der Webseite.
• Der Teil style="border:0;" entfernt alle Ränder um die Karte.
• Das Attribut „allowfullscreen“ ermöglicht es Benutzern, die Karte im Vollbildmodus anzuzeigen.
• Das Attribut loading="lazy" verzögert das Laden der Karte, bis sie sich in der Nähe des Ansichtsfensters befindet, und verbessert so die Seitenladeleistung.

Wie verwende ich iFrames?

In den folgenden Abschnitten wird erläutert, wie Sie mit iFrames das Beste aus Ihrem Benutzererlebnis herausholen.

Einbettung von externen Inhalten

Um externe Inhalte in eine Webseite einzubetten, verwenden Entwickler normalerweise das HTML-Element, mit dem sie Ressourcen wie Videos, Karten oder ganze Webseiten aus anderen Domänen direkt in ihre Site integrieren können. Der Prozess beinhaltet die Angabe der Quelle des Inhalts über das src-Attribut im Tag, der auf die URL des externen Inhalts verweist. Zusätzliche Attribute wie width, height und allow können verwendet werden, um das Erscheinungsbild und Verhalten des eingebetteten Inhalts zu steuern und sicherzustellen, dass er nahtlos in das Seitendesign passt.

Durch die Einbettung externer Inhalte auf diese Weise verbessern Entwickler die Funktionalität und Interaktivität ihrer Webseiten und bieten Benutzern ein umfassenderes Erlebnis, ohne dass diese die Site verlassen müssen.

Inhalt dynamisch laden

Das dynamische Laden von Inhalten innerhalb eines iFrames beinhaltet das Ändern der Quelle (src) des iFrames als Reaktion auf Benutzerinteraktionen oder andere Auslöser wie Schaltflächen oder Links. Dies kann erreicht werden durch JavaScript, wo Sie das src-Attribut des iFrames manipulieren können, um neue Inhalte zu laden, ohne die gesamte Seite neu zu laden.

Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, kann eine JavaScript-Funktion ausgeführt werden, die das src-Attribut des iFrames aktualisiert, sodass ein neues HTML-Dokument oder eine neue Webressource abgerufen und angezeigt wird. Dieser Ansatz ist besonders nützlich für die Erstellung dynamischer Web Anwendungen wenn basierend auf Benutzeraktionen unterschiedliche Inhalte im selben Seitenbereich angezeigt werden müssen, wird das Benutzererlebnis durch nahtlose Übergänge zwischen unterschiedlichen Inhalten verbessert.

Darüber hinaus können Sie durch die Nutzung von history.pushState API In Kombination mit dynamischen iFrame-Inhalten ist es möglich, den Browserverlauf beizubehalten, sodass Benutzer durch die dynamisch geladenen Inhalte vor- und zurücknavigieren können, als würden herkömmliche Seiten geladen.

Erstellen von Inlineframes

Zum Erstellen von Inline-Frames, auch iFrames genannt, wird das HTML-Element zum Einbetten externer Inhalte direkt in eine Webseite. Dieses Element ist vielseitig und ermöglicht es Entwicklern, alles von Videos und Karten bis hin zu ganzen Webseiten oder interaktiven Widgets in den vorhandenen Inhalt einzufügen. Durch Angabe des src-Attributs definieren Sie die URL des einzubettenden Inhalts, während andere Attribute wie Breite, Höhe und Rahmenrand das Erscheinungsbild und Verhalten des iFrames steuern.

iFrames sind besonders nützlich für die nahtlose Integration von Inhalten Dritter, da sie es Benutzern ermöglichen, mit externen Ressourcen zu interagieren, ohne die Hauptseite verlassen zu müssen. Mit zusätzlichen Attributen wie Sandbox und Allow können Entwickler Sicherheit und Funktionalität optimieren und sicherstellen, dass sich die eingebetteten Inhalte wie vorgesehen verhalten, während die allgemeine Integrität und Leistung der Website erhalten bleibt.

Bewährte Vorgehensweisen für iFrames

Bei der Verwendung von iFrames in der Webentwicklung ist die Einhaltung bewährter Methoden unerlässlich, um sicherzustellen, dass sie ordnungsgemäß funktionieren, die Sicherheit gewährleistet ist und ein gutes Benutzererlebnis bieten. Hier sind einige bewährte Methoden für die Verwendung von iFrames:

• Verwenden Sie aus Sicherheitsgründen das Sandbox-Attribut. Das Sandbox-Attribut erhöht die Sicherheit, indem es Beschränkungen auf den Inhalt innerhalb des iFrames anwendet. Standardmäßig können iFrames Sicherheitsrisiken wie Cross-Site-Scripting (XSS) mit sich bringen. Durch die Verwendung einer Sandbox werden die Aktionen eingeschränkt, die der eingebettete Inhalt ausführen kann, z. B. das Ausführen von Skripts, das Senden von Formularen oder der Zugriff auf den Browserspeicher. Sie können bestimmte Funktionen wie Skripts oder Formulare auch selektiv zulassen, indem Sie zusätzliche Zulassungswerte angeben.

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

• Geben Sie für die Barrierefreiheit ein Titelattribut an. Durch das Hinzufügen eines beschreibenden Titelattributs zu Ihrem iFrame wird die Zugänglichkeit verbessert, insbesondere für Benutzer, die auf Bildschirmleseprogramme angewiesen sind. Das Titelattribut bietet eine kurze Beschreibung des Inhalts und hilft Benutzern, zu verstehen, worum es sich bei dem eingebetteten Inhalt handelt.

<iframe src="https://example.com" title="Interactive map of our location"></iframe>

• Sorgen Sie für ein responsives Design. iFrames können manchmal die Reaktionsfähigkeit einer Webseite beeinträchtigen, insbesondere auf kleineren Bildschirmen. Um sicherzustellen, dass der iFrame-Inhalt auf verschiedenen Geräten richtig skaliert wird, verwenden Sie CSS, um das iFrame responsiv zu machen. Sie können dies erreichen, indem Sie die Breite und Höhe auf Prozentwerte setzen oder Ansichtsfenstereinheiten verwenden, kombiniert mit Beschränkungen für maximale Breite und maximale Höhe.

iframe {

    width: 100%;

    height: auto;

    max-width: 600px;

    max-height: 400px;

}

• Vermeiden Sie die übermäßige Verwendung von iFrames. Obwohl iFrames nützlich sind, führt übermäßiger Einsatz zu langsameren Seitenladezeiten, Sicherheitsrisiken und einer schlechten Benutzererfahrung. Erwägen Sie, wenn möglich, alternative Methoden wie die Verwendung von APIs oder das direkte Einbetten von Inhalten in die Seite, anstatt sich auf mehrere iFrames zu verlassen.
• Legen Sie eine Referrer-Richtlinie fest. Das Attribut „referrerpolicy“ steuert die Menge der Referrer-Informationen, die gesendet werden, wenn der iFrame-Inhalt geladen wird. Dies kann zum Schutz der Privatsphäre der Benutzer beitragen und verhindern, dass vertrauliche Informationen mit dem eingebetteten Inhalt geteilt werden. Gängige Werte sind „no-referrer“, „origin“ oder „strict-origin-when-cross-origin“.

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

• Verwenden Sie das Ladeattribut, um die Leistung zu verbessern. Das Ladeattribut trägt zur Optimierung der Seitenleistung bei, indem es das Laden von Offscreen-iFrames verzögert, bis sie benötigt werden (d. h. wenn sie sich in der Nähe des Ansichtsfensters befinden). Der Lazy-Wert verzögert das Laden, während der Eager-Wert das iFrame sofort lädt.

<iframe src="https://example.com" loading="lazy"></iframe>

• Legen Sie die entsprechenden Zulassungsberechtigungen fest. Das Allow-Attribut gibt an, welche Funktionen der iFrame-Inhalt verwenden darf, z. B. Geolokalisierung, Kamerazugriff oder Autoplay. Durch das Festlegen präziser Berechtigungen werden die Funktionen des eingebetteten Inhalts eingeschränkt, wodurch Sicherheit und Benutzerdatenschutz verbessert werden.

<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>

• Berücksichtigen Sie Cross-Origin-Richtlinien. iFrames, die Inhalte aus verschiedenen Domänen laden, können Sicherheitsprobleme verursachen. Implementieren Sie CORS-Richtlinien (Cross-Origin Resource Sharing) auf dem server Hosten Sie den iFrame-Inhalt und verwenden Sie X-Frame-Optionen oder die Content-Security-Policy (CSP)-Header, um zu steuern, welche Websites Ihren Inhalt in einen iFrame einbetten können. Dies hilft, Clickjacking und andere Sicherheitslücken zu verhindern.
• Stellen Sie Fallback-Inhalte bereit. Falls das Laden des iFrames fehlschlägt oder es blockiert ist, sollten Sie Fallback-Inhalte innerhalb des Tag. Dieser Inhalt wird angezeigt, wenn das iFrame nicht geladen werden kann, und bietet so ein besseres Benutzererlebnis.

<iframe src="https://example.com">

    <p>Your browser does not support iFrames. Please visit <a href="https://example.com">this link</a> instead.</p>

</iframe>

Überwachen Sie die Auswirkungen auf die Leistung. iFrames können die Seitenleistung verlangsamen, insbesondere wenn sie umfangreiche Inhalte wie Videos oder interaktive Elemente enthalten. Überwachen Sie regelmäßig die Auswirkungen von iFrames auf die Ladezeit Ihrer Seite und optimieren Sie iFrames oder laden Sie sie verzögert, wenn sie für den Benutzer nicht sofort sichtbar sind.