IFrames und srcdoc Attribut, HTML-Code unabhängig in Webseiten einbinden

HTML-Code in eine Webseite zu integrieren hat man die Auswirkung, dass CSS-Eigenschaften auf den Code angewendet werden. Die Lösung sind IFrames und mit des „srcdoc“-Attributs können IFrame ohne externen Verweis erstellt und mit HTML-Code befüllt werden.

Hier geht es zu unserem neuen Online-Tool für die Erstellung von Iframes mit srcdoc-Attribut.

IFrame mit srcdoc erstellen

Bei einem normalen IFrame geben wir eine Quelle mit dem „src“ Attribut an. Dies ist eine URL, welche eingebunden wird und im IFrame dargestellt wird. Mit dem „srcdoc“ Attribut wird keine externe Quelle festgelegt, sondern hier können wir direkt den HTML-Code eingeben.

<iframe srcdoc="<html><body>Inhalt in einem IFrame mit dem srcdoc-Attribut,
    das CSS der Seite beeinflusst diesen Inhalt nicht.</body></html>"></iframe>

Bestseller Nr. 1
Einstieg in HTML und CSS: Webseiten programmieren...
  • Müller, Peter (Autor)
  • 507 Seiten - 28.06.2020 (Veröffentlichungsdatum) - Rheinwerk Computing (Herausgeber)

Das Ergebnis:

Die Darstellung des Iframes unterscheidet sich nicht von einem „normalen“ Iframe, die gleichen Eigenschaften können festgelegt werden. Der Vorteil ist, dass wir keine externe Quelle benötigen und damit die Sache auch bei Baukastensystemen durch einfaches einfügen von HTML-Code funktioniert.

Jetzt online testen!

Escapen von komplexem HTML-Code

Alles gut? Leider nicht, der Ansatz kommt schnell an die Grenzen, wenn der HTML-Code umfangreicher wird und Anführungszeichen und komplexere HTML-Tags enthält. Kurz gesagt, weiß dann der Browser nicht mehr, wo das innere Dokument endet und es kommt zu Darstellungsfehlern.

Um diesem entgegenzuwirken, ist es besser den HTML-Code zu escapen. Beim Escapen werden Anführungszeichen und die spitzen Klammern durch HTML-Entitäten ersetzt.

Das Ergebnis:

Unser kleiner Test zeigt, dass wir im Iframe das Bootstrap-Framework verwenden und die Hauptseite das W3.CSS-Framework.

Iframe mit srcdoc-Attribut erstellen mit unserem Online-Tool

Für die einfache Erstellung von Iframe mit dem srcdoc-Attribut haben wir ein Online-Tool erstellt, welches die Konfiguration und das Escapen von HTML-Code.

Damit lassen sich auch komplexe HTML-Dokumente, wie HTML-Formulare, zu einem Iframe konvertieren und dann auf anderen Webseiten ohne Wechselwirkung einbauen.

Jetzt online testen/a>

Bestseller Nr. 1
Einstieg in HTML und CSS: Webseiten programmieren...
  • Müller, Peter (Autor)
  • 507 Seiten - 28.06.2020 (Veröffentlichungsdatum) - Rheinwerk Computing (Herausgeber)
Bestseller Nr. 2
HTML5 und CSS3: Das umfassende Handbuch zum Lernen...
  • Wolf, Jürgen (Autor)
  • 1243 Seiten - 28.01.2019 (Veröffentlichungsdatum) - Rheinwerk Computing (Herausgeber)

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.