Denis Potschien 27. Juni 2014

HTML5-Imports: 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.

html5imports

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.

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

Derzeit werden HTML5-Imports nur von Chrome unterstützt. Allerdings muss die Funktionalität im Browser erst freigeschaltet werden. Dazu rufen Sie zunächst über „chrome://flags“ die Einstellungen für die experimentellen Funktionen auf. Darin suchen und aktivieren Sie den Punkt „HTML-Importe aktivieren“. Nach einem Neustart des Browsers können HTML5-Imports verwendet werden.

html5imports_chrome
Abbildung: Einstellungen im Chrome

Folgende Funktion prüft, ob der Browser HTML5-Imports bereits unterstützt.

if ("import" in document.createElement("link")) {
  // HTML5-Imports werden unterstützt.
}

Für ältere Browser gibt es ein Polyfill, welches die HTML5-Funktionalität für ältere beziehungsweise andere Browser nachbildet. Somit ist es möglich, die HTML5-Imports bereits produktiv einzusetzen.

(dpe)

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

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

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.