HTML Imports

• CSS soubor je možné připojit přes: <link href="styl.css" type="text/css" rel="stylesheet">
• JavaScriptový soubor připojí zase: <script src="skript.js"></script>
• A připojit obrázek lze přes: <img src="obrazek.jpg">

HTML importy umožňují obdobným způsobem vložit z jedné HTML stránky jinou HTML stránku.

<link rel="import" href="importovana-stranka.html">

Hezké je, že takto vložená stránka se vloží se vším všudy, tedy se načtou i skripty, styly nebo obrázky v importované stránce připojené. Zároveň je zajištěno, že se každý takový objekt načte jen jednou, i když se bude připojovat vícekrát.

Podpora

Importování HTML souborů zatím funguje jen v Chromu po povolení Enable HTML Imports v about:flags. Testovat podporu HTML Imports může následující kód.

if ('import' in document.createElement('link')) {
  // HTML import funguje
}

Využití

Dobrá podpora této funkce napříč prohlížeči by mohla výrazně zpříjemnit začleňování cizích hotových řešení do vlastní aplikace. Různé frameworky sestávají běžně z několika JS a CSS souborů, které se musí při<link>ovat nebo při<script src>ovat. Řešení s <link rel=import> by toto elegantně řešilo.

<link rel="import" href="framework.html">

Připojovat lze podobně jako u AJAXu jen obsah ze stejné domény nebo přes Cross-origin resource sharing.

Použití

Import nefunguje jako běžné include známé z PHP — tedy neznamená to vypsat obsah importované stránky v místě použití <link rel=import>, ale jen dá vědět prohlížeči, že si má daný obsah připravit (skripty, styly, obrázky atd. načíst; z HTML vytvořit DOM). Výhodné chování je, že importem připojené skripty neblokují další načítání.

Obsah z připojeného HTML souboru získáme pomocí JS následovně:

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

Když máme obsah, stačí ho běžným způsobem naklonovat do dokumentu:

document.body.appendChild(obsah.cloneNode(true));

Nad obsahem z link.import lze provádět standardní metody DOMu typu getElementById.

JS v importovaném souboru

JS kód v souboru, který je importován, se na rozdíl od HTML nebo CSS projeví rovnou, tj. je proveden ihned po načtení.

Při skriptování je potom:

1. nadřazený dokument (ze kterého se import volá) dostupný přes document,
2. obsah importovaného přes document.currentScript.ownerDocument.

Odkazy

• W3C: Specifikace HTML Imports
• HTML5 Rocks: HTML Imports #include for the web