Anzeige
Der Agentur-Server: Das digitale Zuhause für deine Projekte.
↬ Jetzt testen ↬ Jetzt testen!
Denis Potschien 27. Juni 2014

HTML5: HTML-Dateien in HTML-Dateien importieren

Das <link>-Element ist ein Segen. Es ermöglicht das Einbinden von Stylesheet- und JavaScript-Dateien, die in mehreren Dokumenten benötigt werden. Allerdings war es bisher nicht möglich, darüber auch HTML-Dateien in ein Dokument zu laden. Wollte man diese einbinden, ging das bislang nur per <iframes>-Element oder über die JavaScript-Methode XMLHttpRequest(). Dank der neuen HTML5-Imports ist es jetzt auch möglich, HTML-Dateien per <link> in ein anderes Dokument zu laden.

Einfache Auszeichnung im Header

Um eine HTML-Datei einzubinden, muss diese zunächst einmal per <link>-Element im Header ausgezeichnet werden und für das rel-Attribut den Wert import erhalten. Über das href-Element wird wie gewohnt die URL der Datei angegeben.

<link href="extern.html" rel="import" />

Sind in der zu importierenden Datei <style>– oder <script>-Elemente enthalten, werden diese direkt übernommen. Dabei spielt es keine Rolle, ob diese Elemente im Head oder Body der zu importierenden Datei stehen. Es ist also möglich, Stylesheets und JavaScripts in einer HTML-Datei zu bündeln und diese dann per HTML5-Imports in mehrere andere Dateien einzubinden.

html5imports

Sind in der importierten Datei beispielsweise Stylesheets vorhanden, werden diese direkt angewendet. Vorher definierte Stylesheets des „Elterndokuments“ werden dabei überschrieben. Entscheidend ist, an welcher Position innerhalb des „Elterndokuments“ das <link>-Element mit der zu importierenden Datei steht.

Gleiches gilt für JavaScripts. Auch externe Stylesheet- und JavaScript-Dateien, die in der importierten Datei eingebunden sind, werden zusammen mit dem HTML-Dokument ins „Elternelement“ geladen.

Auf Inhalte der Importdatei zugreifen

Andere Inhalte der importierten Datei werden nicht unmittelbar dargestellt, aber dennoch geladen. Das heißt, dass zum Beispiel Texte und Bilder aus der Importdatei im einbindenden HTML-Dokument zunächst nicht sichtbar sind. Denn sie sind nicht Teil des DOM-Baums des „Elterndokuments“. Auf diese Inhalte lässt sich jedoch per JavaScript zugreifen.

var extern = document.getElementsByTagName("link")[0].import;

Im Beispiel wird angenommen, dass das erste vorkommende <link>-Element eine HTML-Datei lädt. Über die JavaScript-Eigenschaft import wird die komplette Baumstruktur der importierten Datei in eine Variable überführt. Auf die einzelnen Elementknoten kann nun per JavaScript zugegriffen werden.

var absatz = extern.getElementsByTagName("p")[0];

Über die bekannten JavaScript-Methoden wie zum Beispiel getElementsByTagName() lassen sich alle Knoten ansteuern und auslesen. Sie können nun bequem in das importierende HTML-Dokument übernommen und in den dortigen DOM-Baum eingebunden werden. Alternativ kann auch der gesamte Inhalt des <body>-Elements durch den der importierten Datei ersetzt werden.

window.addEventListener("load", function() {
  document.getElementsByTagName("html")[0].replaceChild(extern.getElementsByTagName("body")[0], document.getElementsByTagName("body")[0]);
}, false);

Im Beispiel wird per replaceChild() der Inhalt des <body>-Elements ersetzt. Um sicherzugehen, dass die Ersetzung erst stattfindet, wenn alle Inhalte geladen sind, wird eine entsprechende Funktion per addEventListener() ausgeführt, wenn der Ladevorgang abgeschlossen ist.

Browsersupport

Um die HTML-Imports im Rahmen der Diskussion um Web Components gibt es Standardisierungsgerangel. Das aktuelle Arbeitspapier findest du hier. Als Polyfill ist dieses Javascript zu empfehlen.

(Der Beitrag erschien im Original im Juni 2014 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2018.)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

7 Kommentare

  1. Es geht dabei weniger um erzieherische Maßnahmen, als um die Schmerzen, die man beim Entwickeln spüren muss. Dazu sind HTML Imports für sich gesehen kein gutes Beispiel, da man auf sie gut verzichten kann, aber als Teil von HTML 5 bzw. Web Components gehören sie dann doch zu einem Funktionspaket, mit deren Hilfe man Web-Anwendungen wesentlich eleganter, zeitsparender, besser wartbar umsetzen kann. Web Components sind für eine Visitenkarte im Netz sicher wieder nicht das richtige Beispiel, für Web-Anwendungen aber doch.

  2. @TheRiddler: Man sollte an alle potentiellen Besucher einer Website denken. Auf meine Website kommen derzeit noch 1 bis 2% User von IE6. Die will ich auch erreichen und nicht mit einer halb zerlegten Website. Wenn andere auf ihren Websites erzieherische Maßnahmen setzen wollen, sollen sie das freilich tun.

    Aus welchen Gründen Leute ihre Browser updaten oder eben nicht, ist mir eigentlich egal. Die sollen machen, was sie für richtig halten. Für mich ist nur relevant, mit welchen Browsern sie auf meine Website kommen.

    • Mir ist eh nicht klar, warum ich ein HTML5-Tag benutzen soll, welches für den eigentlichen Import JavaScript benutzt – wenn ich mit JavaScript eben diesen Import auch ohne HTML5 durchführen kann. Mehr Komplexität, mehr Abhängigkeiten – aber mit welchem Mehrwert? Weil man das jetzt kann? Jedenfalls manchmal bei einigen wenigen Browsern?

  3. Danke, es ist interessant zu wissen, welche Möglichkeiten es gibt. Ich halte in diesem Fall von einem Einsatz – außer zum Herumspielen – nicht viel. Die Leute da draußen verwenden teilweise noch IE 6 oder auch viel ältere Browser. Um mehrere Dateien einzubinden, könnte man das auch mit einem externen Javascript machen. Das funktioniert sicher bei allen Browsern, die dann mit den eingebundenen Dateien überhaupt etwas anfangen können.

    Für den Einsatz von HTML5 ist es meiner Meinung nach noch um ein paar Jahre zu früh. CSS3 ist teilweise schon gut verwendbar, weil es zumindest teilweise bereits unterstützt wird und es in den meisten Fällen eine Fallback-Alternative gibt.

    Anstatt erst eine HTML5-Unterstütung in den Browser zu laden um die Imports-Funktion nutzen zu können, ist ein relativ kurzes Javascript mit document.write eine einfachere Lösung, finde ich.

    • “Die Leute da draußen verwenden teilweise noch IE 6 oder auch viel ältere Browser”

      So lange “Entwickler” immer noch an die denken, werden die auch nie updaten. Daher sollte man ggfs. überlegen die max. drei letzten Browser-Versionen zu unterstützen. Besonders lustig ist oftmals die Ansage einer IT Abteilung: “Wir update die Browser aus Sicherheitsgründen nicht “. Yo, klar!

  4. Das klingt spannend; gibt’s ein reales Beispiel mit Praxisbezug, für was das verwendet werden könnte?

    • Du könntest zum Beispiel alle zu ladenden Ressourcen, die für dein Web-Projekt erforderlich sind, in ein HTML-File schreiben und das dann jeweils importieren – anstatt alle Files per “link” einzeln zu holen.

Schreibe einen Kommentar zu TheRiddler Antworten abbrechen

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