Was ist Iframe und wie verwenden Sie es auf Ihrer Website?

Haben Sie sich jemals gefragt, ob es eine einfache Möglichkeit gibt, ein Video oder eine Karte aus einer anderen Quelle zu Ihren Webseiten hinzuzufügen? Die Antwort lautet „Ja“, und es wird als Iframe bezeichnet. Es ermöglicht Ihnen, Webseiten in ein HTML-Dokument einzubetten, ohne dass eine Programmierung erforderlich ist.

In diesem Artikel erfahren Sie, was ein Iframe ist, wie er funktioniert, welche praktischen Anwendungen er hat und wie Sie ihn zu Ihren Webseiten hinzufügen.

Inline-Frames ermöglichen einen verschachtelten Browserkontext, bei dem ein Browser mehrere ineinander eingebettete interaktive Bereiche auf einer einzelnen Webseite anzeigt. Diese Art der Einrichtung ermöglicht den Effekt einer Seite innerhalb einer Seite und vieles mehr. Unten finden Sie ein Iframe-Beispiel zur Visualisierung eines YouTube-Videos.

Wofür werden Iframes verwendet

Inline-Frames haben viele praktische Anwendungen, die das Standarddesign und die Funktionalität einer Webseite erweitern. Zu den häufigsten Anwendungsfällen gehören:

• Multimedia-Inhalte einbetten – Iframe-Elemente werden häufig zum Einbetten von Multimedia-Inhalten wie Videos, Audiodateien und Animationen von Plattformen wie YouTube, Vimeo und SoundCloud verwendet. Dadurch können Benutzer direkt auf der besuchten Website mit den Inhalten interagieren, ohne die Seite verlassen zu müssen.
• Anwendungen von Drittanbietern integrieren – Webentwickler nutzen Iframes, um Anwendungen von Drittanbietern nahtlos in ihre Websites zu integrieren. Beispielsweise kann ein Unternehmen ein Google Maps-Widget einbetten, um seinen Standort anzuzeigen, oder eine E-Commerce-Website kann ein Zahlungsgateway für Transaktionen enthalten.
• Anzeigen von Werbung – Iframes sind eine beliebte Wahl für die Anzeige von Werbung auf Webseiten. Sie können Anzeigeninhalte vom Inhalt der Hauptseite trennen, was bei der Verwaltung von Anzeigenskripten und anderen hilfreich ist Aufrufe oder Klicks unabhängig voneinander verfolgen.
• Externe Inhalte laden – Iframes können Inhalte aus externen Quellen laden wie Newsfeeds, Wetteraktualisierungen oder Social-Media-Beiträge. So reichern sie die Host-Website mit dynamischen Inhalten an, ohne dass eine komplexe Backend-Integration erforderlich ist.
• Erstellen einer Site innerhalb einer Site – Iframes können ein „Site innerhalb einer Site“-Erlebnis erstellen, bei dem Besucher auf einer anderen Website navigieren können, ohne die Originalseite zu verlassen. Dies ist besonders nützlich für das Hosten von Microsites oder Produktkatalogen.
• Isolieren browserspezifischer Inhalte – Entwickler können Iframes verwenden, um Inhalte zu isolieren, die sich in verschiedenen Browsern unterschiedlich verhalten und sicherzustellen, dass sie den Rest der Seite nicht beeinträchtigen. Dies kann eine vorübergehende Lösung sein, während eine dauerhafte Lösung entwickelt wird.
• Verbesserung von Design und Layout – Iframes können dabei helfen, komplexere Webseiten-Layouts zu erstellen. Designer können sie verwenden, um interaktive oder feste Elemente in eine Seite einzubetten, beispielsweise eine persistente Musikplayer oder eine Chatbox.
• Vereinfachung von Inhaltsaktualisierungen – Wenn derselbe Inhalt auf mehreren Seiten angezeigt werden muss, kann ein Iframe verwendet werden, um den Inhalt an einem Ort zu zentralisieren. Auf diese Weise werden Aktualisierungen durchgeführt Der Inhalt muss nur einmal erstellt werden und die Änderungen werden automatisch überall dort angezeigt, wo der Iframe eingebettet ist.

Iframe-Beispiele

Iframes haben viele praktische Anwendungen, die über ein Video oder ein Bild innerhalb einer Webseite hinausgehen. Hier sind einige gängige Beispiele für die Verwendung eines Iframes.

Eingebettetes Video

Dies ist wohl die beliebteste Anwendung von Iframes. Anstatt Ihren Webserver beim Abspielen von Videos zu belasten, können Sie Videos einbetten, die auf einem speziellen Dienst wie YouTube oder Vimeo gehostet werden.

Eingebettete Karte

Google Maps erleichtert Ihren Kunden das Auffinden Ihres Unternehmensstandorts. Mithilfe von Iframes können Sie ganz einfach Google Maps mit Ihrem angehefteten Standort einbetten.

Seite innerhalb einer Seite

Wenn Sie eine bestimmte Funktionalität einer anderen Website in Ihre eigenen Webseiten integrieren möchten, können Sie einen ausgewählten Teil oder eine ganze Seite dieser Website mit einem Iframe einbetten.

So betten Sie ein Iframe-Element in eine Website ein

Die Standardmethode zum Hinzufügen eines Iframe-Elements besteht darin, das Iframe-Tag in den HTML-Code einer Webseite einzufügen. Abhängig von Ihrer Website-Anwendung oder den von der Quelle bereitgestellten Optionen gibt es jedoch möglicherweise andere einfachere und bequemere Methoden. Im Folgenden untersuchen wir die gängigsten Methoden.

Hinzufügen eines Iframe-Tags zu einem HTML-Dokument

Dies ist die universelle Möglichkeit, einer Webseite einen Iframe hinzuzufügen. Sie müssen den HTML-Code der Seite bearbeiten und das Tag <iframe> einfügen, das den Bereich erstellt, in dem der externe Inhalt visualisiert wird.

Unten finden Sie ein Beispiel für ein Iframe-HTML-Tag.

<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw?si=g5ghgoRcoUou5e9R" width="560" height="315" title=" YouTube-Videoplayer"></iframe>

Lassen Sie uns die Elemente, aus denen das Iframe-Tag besteht, aufschlüsseln.

• Das öffnende Tag <iframe> identifiziert das Element als iFrame.
• Das iframe src-Attribut definiert die URL-Adresse der Iframe-Quelle. Die unter dieser Adresse gefundene externe Ressource wird im Iframe-Bereich auf der Webseite angezeigt.
• Das height-Attribut definiert die vertikale Größe des iframe-Elements. Sie können eine feste Größe (Pixel) oder eine automatische Größe (als Prozentsatz der Bildschirmgröße festgelegt) verwenden.
• Die Width-Attribute definieren die Iframe-Breite. Ähnlich wie die Höhe kann auch die Breite feste oder automatische Werte annehmen.
• Das title-Attribut gibt eine Beschreibung des Iframes, der von Suchmaschinen und Besuchern mithilfe unterstützender Technologien verwendet werden kann.
• Das Tag </iframe> umschließt den Iframe-Code.

Das Beispiel enthält nur einen kleinen Teil des gesamten Satzes von Iframe-Attributen. Es gibt verschiedene andere Attribute, die die Iframe-Eigenschaften auf unterschiedliche Weise ändern, z. B. das sandbox-Attribut, das name-Attribut, das srcdoc-Attribut, das allow-Attribut, das target-Attribut, das loading-Attribut und viele mehr.

Einige Attribute wie frameborder und seamless sind in HTML5 veraltet und sollten stattdessen mit der CSS-Border-Eigenschaft behandelt werden. Es empfiehlt sich immer, sich auf die neuesten HTML-Spezifikationen oder -Dokumentation zu beziehen Aktuelle Informationen zu iFrame-Attributen und deren Verwendung.

Sie können auch Attribute verwenden, die nicht spezifisch für Iframes sind, z. B. das Stilattribut. Es weist Inline-CSS-Stile für ein Element innerhalb des Iframe-Inhalts zu. Für eine bessere Organisation und Wiederverwendbarkeit wird jedoch empfohlen, Stile in separaten CSS-Stylesheets zu definieren.

Kopieren des Iframe-Codes aus der Quelle

Einige Websites wie YouTube ermöglichen eine einfachere Inhaltsintegration in Iframes. Sie stellen normalerweise einen Iframe-Code bereit, den Sie einfach kopieren und in Ihre Webseite einfügen können.

Wenn Sie YouTube-Videos einbetten möchten, führen Sie die folgenden Schritte aus.

1. Klicken Sie auf der Videoseite auf die Schaltfläche Teilen.
   

   

2. Wählen Sie im folgenden Popup-Fenster die Option Einbetten aus.
   

   

3. Es erscheint ein neues Fenster, in dem das gesamte Iframe-Tag mit der YouTube-Einbettungs-URL angezeigt wird. Sie können den Code markieren und kopieren oder auf die Schaltfläche Kopieren in der unteren rechten Ecke klicken.
   

   

4. Öffnen Sie abschließend Ihre Webseite in einem HTML-Editor und fügen Sie den Code an der Stelle ein, an der der Iframe-Inhalt angezeigt werden soll.
   

   

WordPress-Plugins verwenden

Die oben genannten Methoden funktionieren für jede Art von Website-Anwendung. Wenn Ihre Website jedoch mit WordPress erstellt wurde, können Sie einen eingebetteten Inhalt über Iframes hinzufügen, indem Sie ein Plugin verwenden. Eines davon ist Advanced iFrame.

Nach der Installation erstellt das Plugin einen Abschnitt in Ihrem WordPress-Menü, in dem Sie seine Einstellungen steuern können. Melden Sie sich bei Ihrem WordPress-Dashboard an und wählen Sie im Menü die Option Advanced iFrame aus die linke.

Öffnen Sie im Bedienfeld des Plugins den Abschnitt Basic Settings. Geben Sie im Feld URL die Adresse der externen Quelle ein, die im HTML-Iframe-Element angezeigt werden soll.

Wenn Ihr Theme nicht blockbasiert ist, können Sie das iframe-Element hinzufügen, indem Sie seinen Shortcode in die Webseite einfügen. Um den Shortcode zu generieren, klicken Sie auf die Schaltfläche Generate a shortcode for the current settings. Unterhalb der Schaltfläche sehen Sie den generierten Shortcode, den Sie kopieren können.

Bearbeiten Sie als Nächstes die Seite oder den Beitrag mit Ihrem bevorzugten Editor. Wählen Sie die Position aus, an der Sie Inhalte einbetten möchten, und fügen Sie den Shortcode ein.

Wenn Ihr Theme wie Gutenberg blockbasiert ist, ist das Einfügen eines Iframe-Elements noch einfacher. Sie müssen keinen Shortcode generieren. Erstellen Sie einfach einen Block zur Anzeige von Inhalten mit dem Iframe. Wählen Sie dann das Widget Advanced iFrame und der in den Plugin-Einstellungen definierte HTML-Inhalt wird automatisch eingefügt.

Welche Vorteile bietet die Verwendung von Iframes?

Iframes bieten mehrere Vorteile, die sie zu einem wertvollen Werkzeug für Webentwickler und Inhaltsersteller machen. Hier sind einige der wichtigsten Vorteile:

Inhaltsanreicherung

iFrames bieten eine einfache Möglichkeit, Ihre Website mit zusätzlichen Inhalten anzureichern, ohne sie auf Ihrem Server zu hosten. Durch die Einbettung von Inhalten wie Videos, Karten oder Social-Media-Feeds können Sie Ihren Benutzern ein ansprechenderes und informativeres Erlebnis bieten. Dies steigert den Wert Ihrer Website und hält die Benutzer länger auf Ihrer Seite, da sie mit den eingebetteten Inhalten interagieren.

Benutzererfahrung

Inline-Frames können das Benutzererlebnis auf Ihrer Website erheblich verbessern. Mit ihnen können Sie verschiedene Funktionalitäten wie Formulare, Taschenrechner oder sogar Spiele einbinden, ohne dass Benutzer Ihre Website verlassen müssen. Diese nahtlose Integration stellt sicher, dass Benutzer beim Navigieren auf Ihrer Website eine reibungslose und unterbrechungsfreie Reise haben.

Flexibilität

iFrames sind unglaublich flexibel und vielseitig einsetzbar. Sie können in der Größe angepasst werden, um sie an jeden Teil einer Webseite anzupassen, und sie können responsiv gestaltet werden, sodass sie auf verschiedenen Geräten funktionieren. Diese Anpassungsfähigkeit macht iFrames zu einer vielseitigen Wahl für Webdesigner, die ein dynamisches und reaktionsfähiges Website-Design erstellen möchten.

Effektive Verwaltung der Serverressourcen

Durch das Einbetten von Inhalten aus anderen Quellen können Sie Serverressourcen und Bandbreite sparen. Da die eingebetteten Inhalte auf externen Servern gehostet werden, trägt Ihre Website nicht die Last, die das Hosten dieser Inhalte mit sich bringt. Dies kann zu einer verbesserten Seitenleistung und geringeren Hostingkosten führen.

Nachteile und Risiken der Verwendung von Iframes

Trotz ihrer Vorteile bringen iFrames auch bestimmte Nachteile und Risiken mit sich, die sorgfältig abgewogen werden müssen:

Sicherheitsrisiken durch Exploits

Eine der größten Bedenken bei Iframes ist die Sicherheit. Iframes können böswillig zur Durchführung von Clickjacking-Angriffen verwendet werden, bei denen die Klicks eines Benutzers missbraucht werden, um unbeabsichtigte Aktionen auf einer anderen Website auszuführen. Wenn der Inhalt eines iFrames außerdem nicht von einer vertrauenswürdigen Quelle stammt, kann dies möglicherweise zu Schwachstellen auf Ihrer Website führen.

Risiko einer Urheberrechtsverletzung

Beim Einbetten von Inhalten aus externen Quellen besteht das Risiko einer Urheberrechtsverletzung, wenn keine entsprechenden Genehmigungen eingeholt werden. Es ist wichtig sicherzustellen, dass die von Ihnen eingebetteten Inhalte geteilt werden dürfen und dass Sie alle Lizenzanforderungen einhalten.

Negative Auswirkungen auf SEO-Scores

Iframes können der Suchmaschinenoptimierung Ihrer Website schaden, wenn sie nicht richtig verwendet werden. Suchmaschinen haben möglicherweise Schwierigkeiten, den Inhalt innerhalb eines Iframes zu indizieren, sodass er möglicherweise nicht zum Suchranking Ihrer Website beiträgt. Darüber hinaus kann die übermäßige Verwendung von Iframes Ihre Webseite überladen. Dies kann zu einer schlechten Benutzererfahrung führen und sich indirekt auf Ihre SEO-Leistung auswirken.

Zusammenfassung

Iframes sind eine praktische Möglichkeit, Ihre Website aufzuwerten. Sie ermöglichen das Einbetten von Videos, Karten oder ganzen Webseiten in eine Website, um deren Funktionalität und Design zu verbessern. Sie sollten Iframes jedoch mit Vorsicht verwenden, da sie zu potenziellen Sicherheitsrisiken und Komplikationen führen können, wie z. B. der Einbettung von Webseiten, die die Computer der Besucher infizieren können, oder von Inhalten, die Urheberrechte verletzen.

Nachdem Sie diesen Leitfaden gelesen haben, sollten Sie besser verstehen, was Iframes sind, wofür sie verwendet werden und welche Vor- und Nachteile sie haben. Auf diese Weise können Sie Iframes optimal nutzen und gleichzeitig mögliche Schäden vermeiden.