Wir verwenden iFrames (Inlineframes), um HTML-Dokumente in Webseiten einzubetten. Unser Experte zeigt Ihnen die Verwendung von iFrames und liefert praktische Beispiele.
Das HTML- <iframe>Element (auch Inlineframe genannt) kann HTML- Dokumente in andere HTML-Dokumente einbetten und dem Benutzer gleichzeitig die Interaktion mit dem Inhalt ermöglichen. Webdienste verwenden häufig iFrame, um ihren Benutzern eine einfache Möglichkeit zu bieten, Inhalte wie Videos oder Karten einzubetten, ohne Code schreiben zu müssen.
Das vom iFrame-Element gerenderte Dokument ist in seinem eigenen Browserkontext gekapselt, der die CSS- Formatierung, JavaScript und HTML-Inhalte vom ursprünglichen HTML-Dokument trennt.
Das durch das iFrame-Element eingebettete HTML-Dokument kann sowohl eine interne als auch eine externe Ressource sein. In diesem Zusammenhang ist eine interne Ressource eine Datei, die sich auf demselben Server befindet wie die Seite, auf der das iFrame-Element angezeigt wird, und eine externe Ressource befindet sich auf einem anderen Server. Ein iFrame kann daher verwendet werden, um Inhalte von derselben Website oder von anderen Websites anzuzeigen.
Ein iFrame ist nicht das einzige HTML-Element, mit dem wir HTML-Dokumente einbetten können. Wir können auch die Elemente <object>und <embed>wie das iFrame-Element verwenden, um ein separates Dokument anzuzeigen.
So verwenden Sie ein iFrame
Um ein anderes HTML-Dokument mit dem iFrame-Element anzuzeigen, geben Sie eine Quell-URL an. Wir geben die URL-Quelle mit dem Attribut an, srcgefolgt von einem Gleichheitszeichen und einer Zeichenfolge, die die URL enthält. Siehe das folgende Beispiel:
Wenn Sie ein Tool (wie die Chrome- Entwicklertools) zum Überprüfen des iFrame-Elements verwenden, sehen Sie, dass der Inhalt des iFrame ein vollständiges HTML-Skelett mit seinen eigenen <html>, <head>und <body>-Elementen enthält.
Um die Breite und Höhe des iFrame-Elements anzupassen, füge einfach die Attribute widthund hinzu height. Du kannst die Breite und Höhe des iFrame-Elements auch per CSS anpassen, wenn du die Angaben nicht als Attribute hinzufügen möchtest.
Was ist, wenn Sie das iFrame einschränken möchten, um Funktionen wie Skripting, Formulare und Popups zu untersagen, aber gleichzeitig den Zugriff des Benutzers auf Downloads beibehalten möchten? Sie setzen das Attribut sandboxauf allow-downloads.
Attribute eines iFrames
Das iFrame-Element bietet viele verschiedene Attribute, mit denen Sie sein Verhalten ändern können. Sie können beispielsweise die Attribute widthund verwenden height, um die Breite und Höhe des iFrame-Elements in Pixeln festzulegen, oder das sandboxAttribut verwenden, um eine zusätzliche Sicherheitsebene anzuwenden, um schädliche Inhalte zu verhindern.
Hier ist eine Liste der Attribute, die Sie zum Ändern des folgenden iFrame-Elements verwenden können.
SRC
Mit srckönnen Sie den Quellort des externen Dokuments angeben .
Breite
Wenn Sie das Attribut verwenden width, können Sie die Breite des iFrame-Elements in Pixeln festlegen.
Höhe
Mit dem heightAttribut können Sie die Höhe des iFrame-Elements in Pixeln festlegen.
Erlauben
Mit dem Attribut können Sie die Berechtigungsrichtlinie für die Funktionen angeben, die das externe Dokument verwenden darf. In einem Szenario, in dem das iFrame beispielsweise Zugriff auf das Mikrofon haben soll, sollte das Attribut auf gesetzt werden .allow microphone
Hier ist eine kurze Liste anderer Werte, die Sie verwenden können:
- webcam
- geolocation
- fullscreen
- camera
Sandkasten
Sandboxist ein weiteres Attribut, das wir verwenden können, um bestimmte Funktionen des iFrame-Elements einzuschränken und so eine zusätzliche Sicherheitsebene anzuwenden.
Wenn wir beispielsweise das Attribut ohne Werte angeben, werden standardmäßig alle Einschränkungen angewendet. In der Praxis umfasst dies unter anderem Funktionen wie Popups, Formulare und Downloads. Wenn Sie nicht alles einschränken möchten, aber dennoch sicherstellen möchten, dass der Benutzer beispielsweise mit Formularen interagieren kann, fügen Sie es einfach allow-formsals Wert ein.
Es gibt viele andere Werte, die Sie anstelle von allow-forms verwenden können, darunter:
- allow-downloads
- allow-scripts
- allow-top-navigation
- allow-popups
Empfehlungsrichtlinie
Wir können referralpolicydie Referrer-Richtlinie beim Laden der iFrame-Quelle steuern. Sie können das Attribut so einstellen, no-referrerdass der Browser beim Laden der Ressource den Referrer-Header nicht sendet.
Das Attribut hat viele mögliche Werte, darunter:
- same-origin
- strict-origin
- origin
- unsafe-url
SRCDOC
Mit srcdockönnen wir den Inhalt des iFrames in einen Inline-HTML-String umwandeln. Der Inhalt des iFrames wird beispielsweise sein, <p>Hello world!</p> wenn srcdocgleich ist <p>Hello world!</p>.
Möglicherweise möchten Sie auch einige der globalen HTML-Attribute verwenden, um das iFrame so zu ändern, dass es entweder in einem CSS-Stylesheet oder in einer JavaScript-Datei auf das Objekt verweist. Siehe die Liste unten.
- class: Legen Sie die Klassen des HTML-Elements fest.
- id: Legen Sie die ID des HTML-Elements fest.
- style: Geben Sie den Inline-CSS-Stil an.
- title: Erstellen Sie einen Text, der den Inhalt des HTML-Elements beschreibt.
Sie können auch eine Reihe experimenteller Attribute finden, die sich in Zukunft ändern könnten und weniger Browserunterstützung haben. Beispielsweise loadingist das Attribut „experimentell“. Sie können loadingangeben, ob der Inhalt sofort geladen werden soll oder wenn sich der Blickpunkt des Benutzers in einer bestimmten Entfernung befindet.
Beispiele für iFrames
Das HTML- iFrame-Element ist seit über zwanzig Jahren Teil von HTML und wenn Sie zuvor Inhalte von anderen Seiten in eine Website eingebettet haben, ist die Wahrscheinlichkeit groß, dass Sie dieses HTML-Element verwendet haben.
YouTube-Videos einbetten
YouTube ermöglicht es Benutzern schon seit vielen Jahren, Videos auf anderen Seiten einzubetten. Unter jedem YouTube-Video finden Sie ein iFrame-Element mit einer eindeutigen URL namens „ https://www.youtube.com/embed/“, die auf eine Site verweist, die einen Videoplayer mit dem jeweiligen Video enthält. Jedes Video hat seine eigene eindeutige ID, die Sie anstelle von einfügen sollten <unique-id>. Unten sehen Sie ein Beispiel, wie ein iFrame-Element ein YouTube-Video einbettet.
Google Maps einbetten
Mit dem iFrame-Element können Sie auch Google Maps einbetten . Google ermöglicht es Benutzern, interaktive Karten auf ihrer Website hinzuzufügen, indem sie einfach ein iFrames-Element einfügen, ohne dass zusätzlicher Code implementiert werden muss. Für diesen Vorgang müssen Sie jedoch einen API- Schlüssel von Google erhalten und den <API_KEY>Teil der iFrame-Quelle ersetzen.
Das Einbetten von Videos und Karten sind nur zwei von vielen Anwendungsfällen des iFrames-Elements.
Zugänglichkeitsbedenken bei iFrames
Ein häufiges Problem mit der Barrierefreiheit im Zusammenhang mit dem iFrames-Element besteht darin, dass Benutzer, die zum Scannen einer Website einen Screenreader verwenden, möglicherweise keine sinnvollen Informationen zum Inhalt des iFrames erhalten. Wir können dieses Problem lösen, indem wir das titleAttribut anwenden und es auf einen Satz setzen, der den Inhalt des iFrames klar beschreibt .
Im obigen Beispiel wird der Titel des iFrames auf „Beispielwebsite“ gesetzt, um den Benutzer über den Inhalt der Quelle zu informieren. Der Titel könnte beispielsweise der Titel sein, der vom iFrame von YouTube bereitgestellt wird, wenn Sie das Video einbetten (z. B. „Wilde Elefantenbabys bespritzen sich gegenseitig mit Wasser“). Wenn Sie das Element untersuchen, sehen Sie den Titel, der den blinden oder sehbehinderten Benutzer darüber informiert, was er von dem iFrame-Element erwarten kann.
