iframe: Das HTML-Tag erklärt

Externe Inhalte in die eigene Website einbetten? Dafür haben sich In­line­frames (iframes) als äußerst geeignet erwiesen. Auf elegante Weise kann man so zu­sätz­li­che Inhalte im HTML-Dokument un­ter­brin­gen. Im besten Fall merken Besucher der Website gar nicht, dass sie zu­sätz­li­che Inhalte aus­ge­spielt bekommen. Wie kann man den iframe einbinden?

Prin­zi­pi­ell 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 zu­sätz­li­che Dokumente, Bilder oder auch Videos in das ei­gent­li­che Dokument ein­ge­bet­tet werden. Früher hat man dies über normale HTML-Frames gelöst. Diese werden heut­zu­ta­ge nicht mehr genutzt. Statt­des­sen greift man zum iframe-Tag. In einem In­line­frame tauchen die anderen Elemente isoliert für sich auf. So sorgt man z. B. dafür, dass – abhängig von der Größe des ein­ge­bet­te­ten Inhalts – der In­line­frame sich separat durch­scrol­len lässt.

In­line­frames werden deshalb in der Regel dann ein­ge­setzt, wenn man Objekte von anderen Websites in seinen eigenen On­line­auf­tritt in­te­grie­ren möchte. YouTube-Videos oder Google Maps sind hierfür Beispiele. Auch Social-Media-Plug-ins oder spe­zi­fi­sche An­wen­dun­gen lassen sich über iframes einbinden, ebenso wie eigene HTML-Dokumente.

In­line­frames werden innerhalb des HTML-Codes durch das iframe-Tag erstellt.

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

• src: Quelle des ein­zu­bet­ten­den 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: Selbst­ge­wähl­te Be­zeich­nung des spe­zi­fi­schen Frames.
• sandbox: Verbindet den In­line­frame mit be­stimm­ten Si­cher­heits­vor­keh­run­gen.
• srcdoc: Enthält HTML-Code, der im iframe angezeigt werden soll.

Neben diesen gültigen At­tri­bu­ten finden sich in der Praxis noch weitere, die aber seit HTML5 nicht mehr un­ter­stützt werden. Statt­des­sen soll man für diese Funk­tio­nen auf CSS-Lösungen zu­rück­grei­fen.

• scrolling: Lässt sich der In­line­frame gesondert scrollen?
• align: Wie ist die Aus­rich­tung des Frames?
• frame­bor­der: Soll der Frame einen sicht­ba­ren Rahmen haben?
• longdesc: Lange Be­schrei­bung des Frames.
• mar­gin­width: Breite des linken und rechten Rands.
• mar­gin­h­eight: Breite des oberen und unteren Rands.
• vspace: Ver­ti­ka­ler Raum um den iframe herum.

Der ei­gent­li­che Inhalt des iframes sowie ein Teil der Ge­stal­tung lassen sich also aus­schließ­lich über die Attribute regeln. Innerhalb der Tag-Klammer befindet sich prin­zi­pi­ell kein Inhalt. Dieser Platz wird in der Praxis dafür genutzt, einen al­ter­na­ti­ven Text un­ter­zu­brin­gen. Sollte ein Browser nicht in der Lage sein, einen iframe dar­zu­stel­len, wird der Inhalt aus­ge­spielt. Nor­ma­ler­wei­se sollte das aber heut­zu­ta­ge 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:

In diesem Beispiel haben wir auf ein HTML-Dokument auf einer anderen Web­prä­senz hin­ge­wie­sen. 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.

Um den iframe an­spre­chend 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 Dar­stel­lung auf der eigenen Seite angepasst werden. Mit ein paar CSS-Tricks kann ein iframe sogar in ein Re­spon­si­ve Design ein­ge­glie­dert werden.

In­line­frames 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 wei­ter­sur­fen. Die Be­nut­zer­freund­lich­keit steigt dadurch enorm. Daneben kann die Ein­bin­dung aber auch einen tech­ni­schen Vorteil haben. Der Inhalt des iframes wird un­ab­hän­gig vom Rest der Website geladen. Dem Nutzer stehen somit Inhalte bereit, obwohl nicht jedes Element der Seite schon geladen wurde.

Tat­säch­lich verlieren In­line­frames aber immer mehr an Bedeutung, da die Methode einige Nachteile mit sich bringt. So werden die ein­ge­bet­te­ten Elemente von Such­ma­schi­nen nicht ver­nünf­tig behandelt. Das kann sich auf die Such­ma­schi­nen­op­ti­mie­rung und damit auch auf das Ranking der Website auswirken. Viel schwer­wie­gen­der ist aber das Si­cher­heits­ri­si­ko, dass mit iframes ein­her­geht: 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 bei­spiels­wei­se ein schäd­li­ches Plugin-in enthalten oder Phishing betreiben – ohne dass man dies als Website-Betreiber bemerkt.

In letzter Zeit sind iframes auch immer wieder aus da­ten­schutz­recht­li­chen Gründen in die Dis­kus­si­on gekommen. In­line­frames werden häufig für Plug-ins sozialer Medien ein­ge­setzt. Diese greifen teilweise Nut­zer­da­ten ab – auch wenn die Besucher der Website gar nicht mit dem Like- oder Share-Button in­ter­agie­ren und selbst nicht in der ent­spre­chen­den Community an­ge­mel­det sind.