Verständnis von iFrames und deren Verwendung

Veröffentlicht: 2022-04-06

iFrames werden häufig verwendet, um Inhalte auf einer Website einzubetten. Sie können sehr nützlich sein, aber Sie können auch Probleme mit der korrekten Anzeige von Inhalten haben. In diesem Artikel werden wir uns genauer ansehen, was genau iFrames sind, wie man sie verwendet und wie man eventuell auftretende Probleme beheben kann.

Lassen Sie uns darauf eingehen.

Was genau ist ein iFrame ?

iFrame ist die Abkürzung für „Inline Frame“. Sein Zweck besteht darin, HTML-Inhalt in anderen HTML-Inhalt einzubetten und ihn als Webseitenelement anzuzeigen.

Der Inhalt der eingebetteten Quelle erscheint, als ob er Teil Ihres Website-Layouts wäre, außer dass dies nicht der Fall ist. Dabei kann es sich um eine andere Webseite, ein Dokument, ein Video oder andere Arten von interaktiven Medien handeln. Eine häufige Verwendung für iFrames ist das Einbetten von Dingen wie YouTube-Videos.

iFrames sind HTML-Tags und gibt es seit ihrer Einführung im Jahr 1997 schon seit Ewigkeiten. Trotz ihres Alters werden sie immer noch häufig verwendet und von allen modernen Browsern unterstützt.

So verwenden Sie iFrames

Um einen einfachen iFrame zu erstellen, müssen Sie das HTML-Element <iframe> verwenden und die Quelle im src -Attribut angeben. Um dies auszuprobieren, erstellen Sie eine HTML-Datei, zum Beispiel index.html . Öffnen Sie es dann mit Ihrem bevorzugten Editor und fügen Sie den folgenden Code ein:

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com"> </iframe> </body> </html>

Wenn Sie nun die Datei mit einem Browser öffnen, sollten Sie Folgendes sehen:

iFrame

Wie Sie sehen können, umfasst die standardmäßige Iframe-Größe nicht die gesamte Breite des eingebetteten Inhalts (in diesem Fall eine Webseite), sodass automatisch eine Bildlaufleiste angezeigt wird, mit der Sie innerhalb des Fensters navigieren können.

Legen wir nun die Breite und Höhe des iFrames selbst fest:

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com" width="480" height="320" > </iframe> </body> </html>

Aktualisieren Sie die Seite und sehen Sie, wie sie jetzt aussieht.

iFrame mit Abmessungen

Es gibt viele andere Optionen, die bei der Verwendung von iFrames konfiguriert werden können. Die beliebtesten und nützlichsten sind:

  • name : Wir können den Namen des Fframes festlegen, damit wir ihn in JavaScript verwenden können.
  • loading : Definieren Sie, wie ein iFrame geladen wird. Wählen Sie zwischen „faul“, „eifrig“ oder „automatisch“. Wenn beispielsweise der Wert „faul“ verwendet wird, wird der iFrame geladen, wenn der Benutzer die Seite zum iFrame herunterscrollt. Dies hat den Effekt, dass die Seitenladegeschwindigkeit verbessert wird. „Eager“ lädt es sofort, während „auto“ den Browser entscheiden lässt, wann der iFrame geladen wird.
 <!DOCTYPE html> <html> <body> <div class="wrapper"> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" loading="lazy"></iframe> </div> </body> </html>
  • sandbox : Dieses Attribut legt einige Einschränkungen für den Inhalt im iFrame fest, z. B. Skriptausführung, Formularübermittlung und mehr. Sie können auch Ausnahmen für jeden von ihnen machen. Hier sind einige der Einschränkungen:
    – Zulassungsformulare
    – Zeigersperre zulassen
    – Popups zulassen
    – gleiche Herkunft zulassen
    – Allow-Skripte
    – Top-Navigation zulassen
    – Allow-Modals

Sie können alle Einschränkungen anwenden, indem Sie einfach das Sandbox-Attribut hinzufügen, oder Sie können angeben, welche der oben genannten ausgeschlossen werden, indem Sie sie wie folgt im Code definieren:

 <!DOCTYPE html> <html> <body> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" sandbox="allow-forms allow-modals"></iframe> </body> </html>
  • allowfullscreen : Es tut, was es verspricht, und ermöglicht es dem iFrame, sich vollständig auf dem Bildschirm zu öffnen.

Um den AllowFullscreen zu testen, können Sie es versuchen, indem Sie ein YouTube-Video wie folgt einbetten:

 <!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe> </body> </html>

Sie werden feststellen, dass die Vollbild-Schaltfläche unten rechts nur funktioniert, wenn das allowfullscreen- Attribut verwendet wird. Wenn Sie das Attribut entfernen, wird die Vollbild-Schaltfläche ausgegraut.

So machen Sie einen iFrame responsiv

Es ist sehr wichtig, dass alle Elemente auf Ihrer Website responsive sind. iFrames sind keine Ausnahme. Um sicherzustellen, dass ein HTML-iFrame responsiv ist, müssen Sie zuerst die Breiten- und Höhenattribute aus dem Code entfernen und dann einige HTML-Elemente und CSS-Code verwenden, wie unten gezeigt:

 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/PMz9ovrVb_Q"></iframe> </div> </body> </html>

Wir haben unseren iFrame in ein div-Element gepackt und etwas CSS angewendet, um die Abmessungen festzulegen, was sicherstellt, dass es auf allen Bildschirmen, einschließlich Mobilgeräten, gut aussieht.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Wenn Sie jetzt die Bildschirmbreite in Ihrem Browser testen, sollten Sie sehen, dass der iFrame reaktionsschnell angezeigt wird und sein Seitenverhältnis beibehalten wird.

HINWEIS: Wenn Sie sich mit den Tools Ihres Browsers nicht auskennen, finden Sie möglicherweise eine Erweiterung wie den „Responsive Web Design Tester“ für Chrome nützlich.

Die Vorteile der Verwendung von iFrames

iFrames sind sehr beliebt und das aus gutem Grund. Schauen wir uns einige der Gründe dafür an:

Externe Medien teilen

Es gibt viele Gelegenheiten, bei denen Sie vielleicht externe Medien teilen möchten, aber Ihre Besucher auf Ihrer Website halten, anstatt sie auf die Website eines Drittanbieters zu leiten. iFrames ermöglichen Ihnen dies nahtlos, indem Sie die externen Medien benutzerfreundlich auf Ihrer eigenen Website einbinden.

Benutzerdefinierte Konfigurationen

Beim Einbetten von Medien (z. B. YouTube-Videos) geben Ihnen die meisten Video-Hosting-Plattformen viel Kontrolle darüber, wie diese Inhalte angezeigt werden. Sie können beispielsweise wählen, ob das Video in Ihrem Iframe beim Laden automatisch abgespielt oder das Video sogar endlos wiederholt werden soll.

Dinge isoliert halten

Eine weitere großartige Sache an iFrames ist, dass sie das übergeordnete Dokument (normalerweise die Seite Ihrer Website, auf der sie eingebettet sind) nicht beeinträchtigen. Das bedeutet, dass iFrames nicht vom CSS und/oder Javascript Ihrer Website beeinflusst werden.

Einige der beliebtesten Anwendungen für iFrames sind:

  • Betten Sie ein Youtube-Video oder eine Twitter-Timeline oder eine Spotify-Podcast-Playlist ein
  • Ziehen Sie Informationen über das Wetter auf Ihre Website, indem Sie eine Wettervorhersage hinzufügen
  • Hinzufügen eines Google Maps-Standorts

Solange die Quelle, die Sie anzeigen möchten, einen Einbettungscode bereitstellt, können Sie diesen normalerweise immer auf Ihrer Website innerhalb eines iFrame anzeigen.

Mögliche Nachteile der Verwendung von iFrames

Einer der Hauptgründe dafür, iFrames NICHT zu verwenden, ist, dass sie das Risiko erhöhen können, dass Ihre Website einem Cross-Site-Angriff ausgesetzt wird.

Wenn die in Ihren iFrame eingebettete Quelle nicht vertrauenswürdig ist, laufen Sie Gefahr, eine sogenannte „böswillige iFrame-Injektion“ zu erleben, bei der ein Angreifer einen iFrame in eine Webseite einfügt. Bei einem iFrame-Injection-Angriff „nutzen die bösartigen Websites normalerweise Code aus, der möglicherweise den Computer des Endbenutzers gefährden kann“.

Beim Einbetten von Inhalten auf Ihrer Website mithilfe von iFrames ist es daher äußerst wichtig, dass diese Inhalte aus einer vertrauenswürdigen Quelle stammen. Im Zweifelsfall nicht verwenden.

Ein weiterer Nachteil der Verwendung von iFrames ist, dass sie Ihre Website verlangsamen können, insbesondere wenn Sie mehrere davon laden. Ihre Website wird dann nur so schnell wie die externen Inhalte, die geladen werden müssen. Als Vorsichtsmaßnahme dagegen können Sie das zuvor besprochene Ladeattribut verwenden.

Fazit

iFrames werden auf Websites wild verwendet, und es gibt keine Anzeichen dafür, dass dies in absehbarer Zeit aufhört. Vorausgesetzt, Sie verwenden sie richtig, können sie ein großartiges Werkzeug sein, um den Inhalt Ihrer Website zu verbessern.