21.072014

HTML5 Imports

Aktuelle Lösungen zum Einbinden von anderen HTML Seiten beruhen meist auf AJAX oder iFrames. Aber wieso das ganze? Wieso das grundlegendste einer Webseite nur über Umwege einbinden? HTML Imports der HTML5 Web Components soll Abhilfe schaffen.

HTML Imports

Wie man es bereits von CSS Dateien kennt, wird eine HTML Datei mit dem <link> Tag eingebunden (Falls der Import von einer anderen Domain geladen werden soll, muss CORS aktiviert sein).

<head>
  ...
  <link rel="import" href="/path/to/import.html">
  ...
</head>

Innerhalb des Imports kann man alles Ressourcen (HTML, CSS und JS Code) einbinden und auch HTML Templates zur Verfügung stellen. Falls Javascript im HTML des Imports vorhanden ist, wird es sofort ausgeführt und kann auf deine DOMs zugreifen. Imports stören aber nicht das Parsen der Seite, sodass es keine Performance-Einbußen gibt. Eins muss aber beachtet werden: Der Inhalt des Imports wird nicht automatisch in die Seite eingebunden dafür müssen wir mit ein bisschen Javascript nachhelfen.

var content = document.querySelector('link[rel="import"]').import;

So hat man den gesamten Inhalt in der Content Variable und kann damit anstellen was immer man möchte.

Events

HTML Imports unterstützen auch das onload und onerror Event. So kann es benutzt werden.

<script type="text/javascript">
  function onload(e) {
    console.log('Loaded import: ' + e.target.href);
  }
  function onerror(e) {
    console.log('Error loading import: ' + e.target.href);
  }
</script>
<link rel="import" href="file.html" onload="onload(event)" onerror="onerror(event)">

Dynamische Imports

Natürlich kann man den Import auch dynamisch mit Javascript erzeugen.

var link = document.createElement('link');
link.rel = 'import';
link.href = 'import.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

Feature Detection

Damit man sich eine Fallback Lösung bauen kann (z.B. via AJAX) kann man das Link Element auf die Import Funktion prüfen.

function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // supports HTML imports!
} else {
  // use fallback
}

Fazit

HTML Imports sind ein wahrer Segen für alle Frontend-Developer, die Struktur und Wiederverwendbarkeit in ihr HTML Markup bringen wollen. Bis man jedoch die Imports ohne Fallback Lösung benutzen kann, wird noch einige Zeit verstreichen.

Browsersupport

  • Chrome 36+
  • Opera 23+
  • (Firefox 32+ per Config Flag aktivierbar)

Lern uns kennen!