Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 27. Juni 2014

HTML5: HTML-Dateien in HTML-Dateien importieren

Das <link>-Element ist ein Segen. Es ermög­licht das Einbinden von Stylesheet- und JavaScript-Dateien, die in meh­re­ren Dokumenten benö­tigt wer­den. Allerdings war es bis­her nicht mög­lich, dar­über auch HTML-Dateien in ein Dokument zu laden. Wollte man die­se ein­bin­den, ging das bis­lang nur per <iframes>-Element oder über die JavaScript-Methode XMLHttpRequest(). Dank der neu­en HTML5-Imports ist es jetzt auch mög­lich, HTML-Dateien per <link> in ein ande­res Dokument zu laden.

Einfache Auszeichnung im Header

Um eine HTML-Datei ein­zu­bin­den, muss die­se zunächst ein­mal per <link>-Element im Header aus­ge­zeich­net wer­den und für das rel-Attribut den Wert import erhal­ten. Über das href-Element wird wie gewohnt die URL der Datei ange­ge­ben.

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

Sind in der zu impor­tie­ren­den Datei <style>- oder <script>-Elemente ent­hal­ten, wer­den die­se direkt über­nom­men. Dabei spielt es kei­ne Rolle, ob die­se Elemente im Head oder Body der zu impor­tie­ren­den Datei ste­hen. Es ist also mög­lich, Stylesheets und JavaScripts in einer HTML-Datei zu bün­deln und die­se dann per HTML5-Imports in meh­re­re ande­re Dateien ein­zu­bin­den.

html5imports

Sind in der impor­tier­ten Datei bei­spiels­wei­se Stylesheets vor­han­den, wer­den die­se direkt ange­wen­det. Vorher defi­nier­te Stylesheets des „Elterndokuments“ wer­den dabei über­schrie­ben. Entscheidend ist, an wel­cher Position inner­halb des „Elterndokuments“ das <link>-Element mit der zu impor­tie­ren­den Datei steht.

Gleiches gilt für JavaScripts. Auch exter­ne Stylesheet- und JavaScript-Dateien, die in der impor­tier­ten Datei ein­ge­bun­den sind, wer­den zusam­men mit dem HTML-Dokument ins „Elternelement“ gela­den.

Auf Inhalte der Importdatei zugreifen

Andere Inhalte der impor­tier­ten Datei wer­den nicht unmit­tel­bar dar­ge­stellt, aber den­noch gela­den. Das heißt, dass zum Beispiel Texte und Bilder aus der Importdatei im ein­bin­den­den HTML-Dokument zunächst nicht sicht­bar sind. Denn sie sind nicht Teil des DOM-Baums des „Elterndokuments“. Auf die­se Inhalte lässt sich jedoch per JavaScript zugrei­fen.

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

Im Beispiel wird ange­nom­men, dass das ers­te vor­kom­men­de <link>-Element eine HTML-Datei lädt. Über die JavaScript-Eigenschaft import wird die kom­plet­te Baumstruktur der impor­tier­ten Datei in eine Variable über­führt. Auf die ein­zel­nen Elementknoten kann nun per JavaScript zuge­grif­fen wer­den.

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

Über die bekann­ten JavaScript-Methoden wie zum Beispiel getElementsByTagName() las­sen sich alle Knoten ansteu­ern und aus­le­sen. Sie kön­nen nun bequem in das impor­tie­ren­de HTML-Dokument über­nom­men und in den dor­ti­gen DOM-Baum ein­ge­bun­den wer­den. Alternativ kann auch der gesam­te Inhalt des <body>-Elements durch den der impor­tier­ten Datei ersetzt wer­den.

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 sicher­zu­ge­hen, dass die Ersetzung erst statt­fin­det, wenn alle Inhalte gela­den sind, wird eine ent­spre­chen­de Funktion per addEventListener() aus­ge­führt, wenn der Ladevorgang abge­schlos­sen ist.

Browsersupport

Um die HTML-Imports im Rahmen der Diskussion um Web Components gibt es Standardisierungsgerangel. Das aktu­el­le Arbeitspapier fin­dest du hier. Als Polyfill ist die­ses Javascript zu emp­feh­len.

(Der Beitrag erschien im Original im Juni 2014 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update erfolg­te 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 weni­ger um erzie­he­ri­sche Maßnahmen, als um die Schmerzen, die man beim Entwickeln spü­ren muss. Dazu sind HTML Imports für sich gese­hen kein gutes Beispiel, da man auf sie gut ver­zich­ten kann, aber als Teil von HTML 5 bzw. Web Components gehö­ren sie dann doch zu einem Funktionspaket, mit deren Hilfe man Web-Anwendungen wesent­lich ele­gan­ter, zeit­spa­ren­der, bes­ser wart­bar umset­zen kann. Web Components sind für eine Visitenkarte im Netz sicher wie­der nicht das rich­ti­ge Beispiel, für Web-Anwendungen aber doch.

  2. @TheRiddler: Man soll­te an alle poten­ti­el­len Besucher einer Website den­ken. Auf mei­ne Website kom­men der­zeit noch 1 bis 2% User von IE6. Die will ich auch errei­chen und nicht mit einer halb zer­leg­ten Website. Wenn ande­re auf ihren Websites erzie­he­ri­sche Maßnahmen set­zen wol­len, sol­len sie das frei­lich tun.

    Aus wel­chen Gründen Leute ihre Browser updaten oder eben nicht, ist mir eigent­lich egal. Die sol­len machen, was sie für rich­tig hal­ten. Für mich ist nur rele­vant, mit wel­chen Browsern sie auf mei­ne Website kom­men.

    • Mir ist eh nicht klar, war­um ich ein HTML5-Tag benut­zen soll, wel­ches für den eigent­li­chen Import JavaScript benutzt – wenn ich mit JavaScript eben die­sen Import auch ohne HTML5 durch­füh­ren kann. Mehr Komplexität, mehr Abhängigkeiten – aber mit wel­chem Mehrwert? Weil man das jetzt kann? Jedenfalls manch­mal bei eini­gen weni­gen Browsern?

  3. Danke, es ist inter­es­sant zu wis­sen, wel­che Möglichkeiten es gibt. Ich hal­te in die­sem Fall von einem Einsatz – außer zum Herumspielen – nicht viel. Die Leute da drau­ßen ver­wen­den teil­wei­se noch IE 6 oder auch viel älte­re Browser. Um meh­re­re Dateien ein­zu­bin­den, könn­te man das auch mit einem exter­nen Javascript machen. Das funk­tio­niert sicher bei allen Browsern, die dann mit den ein­ge­bun­de­nen Dateien über­haupt etwas anfan­gen kön­nen.

    Für den Einsatz von HTML5 ist es mei­ner Meinung nach noch um ein paar Jahre zu früh. CSS3 ist teil­wei­se schon gut ver­wend­bar, weil es zumin­dest teil­wei­se bereits unter­stützt wird und es in den meis­ten Fällen eine Fallback-Alternative gibt.

    Anstatt erst eine HTML5-Unterstütung in den Browser zu laden um die Imports-Funktion nut­zen zu kön­nen, ist ein rela­tiv kur­zes Javascript mit document.write eine ein­fa­che­re Lösung, fin­de ich.

    • Die Leute da drau­ßen ver­wen­den teil­wei­se noch IE 6 oder auch viel älte­re Browser”

      So lan­ge “Entwickler” immer noch an die den­ken, wer­den die auch nie updaten. Daher soll­te man ggfs. über­le­gen die max. drei letz­ten Browser-Versionen zu unter­stüt­zen. Besonders lus­tig ist oft­mals die Ansage einer IT Abteilung: “Wir update die Browser aus Sicherheitsgründen nicht “. Yo, klar!

  4. Das klingt span­nend; gibt’s ein rea­les Beispiel mit Praxisbezug, für was das ver­wen­det wer­den könn­te?

    • Du könn­test zum Beispiel alle zu laden­den Ressourcen, die für dein Web-Projekt erfor­der­lich sind, in ein HTML-File schrei­ben und das dann jeweils impor­tie­ren – anstatt alle Files per “link” ein­zeln zu holen.

Schreibe einen Kommentar zu TheRiddler Antworten abbrechen

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