iframe: Das HTML-Tag erklärt

Externe Inhalte in die eigene Website einbetten? Dafür haben sich Inlineframes (iframes) als äußerst geeignet erwiesen. Auf elegante Weise kann man so zusätzliche Inhalte im HTML-Dokument unterbringen. Im besten Fall merken Besucher der Website gar nicht, dass sie zusätzliche Inhalte ausgespielt bekommen. Wie kann man den iframe einbinden?

Wofür braucht man das iframe-Tag?

Prinzipiell ist jede Website nur ein einziges HTML-Dokument. Möchte man weitere Elemente einfügen, muss dies über einen Frame geschehen. In diesem können dann zusätzliche Dokumente, Bilder oder auch Videos in das eigentliche Dokument eingebettet werden. Früher hat man dies über normale HTML-Frames gelöst. Diese werden heutzutage nicht mehr genutzt. Stattdessen greift man zum iframe-Tag. In einem Inlineframe tauchen die anderen Elemente isoliert für sich auf. So sorgt man z. B. dafür, dass – abhängig von der Größe des eingebetteten Inhalts – der Inlineframe sich separat durchscrollen lässt.

Inlineframes werden deshalb in der Regel dann eingesetzt, wenn man Objekte von anderen Websites in seinen eigenen Onlineauftritt integrieren möchte. YouTube-Videos oder Google Maps sind hierfür Beispiele. Auch Social-Media-Plug-ins oder spezifische Anwendungen lassen sich über iframes einbinden, ebenso wie eigene HTML-Dokumente.

Struktur von Inlineframes

Inlineframes werden innerhalb des HTML-Codes durch das iframe-Tag erstellt.

<iframe>...</iframe>

Damit der Frame auch korrekt gefüllt wird, gibt man folgende Attribute an:

  • src: Quelle des einzubettenden Inhalts; wird in Form einer URL angegeben.
  • width: Breite des Frames; kann in Pixeln oder Prozent angegeben werden.
  • height: Höhe des Frames; kann in Pixeln oder Prozent angegeben werden.
  • name: Selbstgewählte Bezeichnung des spezifischen Frames.
  • sandbox: Verbindet den Inlineframe mit bestimmten Sicherheitsvorkehrungen.
  • srcdoc: Enthält HTML-Code, der im iframe angezeigt werden soll.

Neben diesen gültigen Attributen finden sich in der Praxis noch weitere, die aber seit HTML5 nicht mehr unterstützt werden. Stattdessen soll man für diese Funktionen auf CSS-Lösungen zurückgreifen.

  • scrolling: Lässt sich der Inlineframe gesondert scrollen?
  • align: Wie ist die Ausrichtung des Frames?
  • frameborder: Soll der Frame einen sichtbaren Rahmen haben?
  • longdesc: Lange Beschreibung des Frames.
  • marginwidth: Breite des linken und rechten Rands.
  • marginheight: Breite des oberen und unteren Rands.
  • vspace: Vertikaler Raum um den iframe herum.

Der eigentliche Inhalt des iframes sowie ein Teil der Gestaltung lassen sich also ausschließlich über die Attribute regeln. Innerhalb der Tag-Klammer befindet sich prinzipiell kein Inhalt. Dieser Platz wird in der Praxis dafür genutzt, einen alternativen Text unterzubringen. Sollte ein Browser nicht in der Lage sein, einen iframe darzustellen, wird der Inhalt ausgespielt. Normalerweise sollte das aber heutzutage nicht mehr vorkommen. Alle gängigen Browser in der neuesten Version können mit der Technik umgehen.

Ein valider iframe kann demnach zum Beispiel so aussehen:

<iframe src="http://example.org/demo.html" height="400" width="800" name="demo">
    <p>Ihr Browser unterstützt keinen iframe!</p>
</iframe>

In diesem Beispiel haben wir auf ein HTML-Dokument auf einer anderen Webpräsenz hingewiesen. Es lassen sich aber auch HTML-Dokumente, die auf dem eigenen Webserver liegen, per iframe-Tag einbinden. Dann brauchen Sie nur den Namen der Datei nennen und eventuell den Pfad, falls sich das Dokument nicht im gleichen Ordner befinden sollte.

Tipp

Wenn Sie YouTube-Videos in Ihre Website einbetten möchten, können Sie ebenfalls zu Inlineframes greifen. Die Video-Plattform bietet den passenden Code dafür direkt auf der Seite des entsprechenden Videos an.

Um den iframe ansprechend zu gestalten, muss man CSS einsetzen. Damit lässt sich in den meisten Fällen aber nur der Frame an sich gestalten. Wenn der Inhalt von einer externen Quelle kommt, kann dieser nur sehr selten für die Darstellung auf der eigenen Seite angepasst werden. Mit ein paar CSS-Tricks kann ein iframe sogar in ein Responsive Design eingegliedert werden.

Vor- und Nachteile von iframe

Inlineframes sind dann sinnvoll, wenn man Elemente aus externen Quellen auf der eigenen Seite einbauen möchte. Statt den Nutzer auf die andere Domain zu schicken, kann er bequem auf der Website weitersurfen. Die Benutzerfreundlichkeit steigt dadurch enorm. Daneben kann die Einbindung aber auch einen technischen Vorteil haben. Der Inhalt des iframes wird unabhängig vom Rest der Website geladen. Dem Nutzer stehen somit Inhalte bereit, obwohl nicht jedes Element der Seite schon geladen wurde.

Tatsächlich verlieren Inlineframes aber immer mehr an Bedeutung, da die Methode einige Nachteile mit sich bringt. So werden die eingebetteten Elemente von Suchmaschinen nicht vernünftig behandelt. Das kann sich auf die Suchmaschinenoptimierung und damit auch auf das Ranking der Website auswirken. Viel schwerwiegender ist aber das Sicherheitsrisiko, dass mit iframes einhergeht: Wenn man externe Inhalte einbettet, können diese auch eine negative Wirkung auf das System des Nutzers oder den Nutzer selbst ausüben. Der Inhalt im iframe kann beispielsweise ein schädliches Plugin-in enthalten oder Phishing betreiben – ohne dass man dies als Website-Betreiber bemerkt.

In letzter Zeit sind iframes auch immer wieder aus datenschutzrechtlichen Gründen in die Diskussion gekommen. Inlineframes werden häufig für Plug-ins sozialer Medien eingesetzt. Diese greifen teilweise Nutzerdaten ab – auch wenn die Besucher der Website gar nicht mit dem Like- oder Share-Button interagieren und selbst nicht in der entsprechenden Community angemeldet sind.

Fazit

Inlineframes haben ganz sicher weiterhin ihre Berechtigung bei der Erstellung von Websites. In vielen Fällen kann der gewünschte Effekt aber auch über andere Techniken wie CSS oder JavaScript erreicht werden, was dann eher zu empfehlen ist.

War dieser Artikel hilfreich?