Outline

We've not had way to import html until now. But from now, we can import html documents using html import.

Capability

can i use : http://caniuse.com/#feat=imports

At the moment (2014/11/01) we can it only Google Chrome, Opera, and Chrome for Android

Usage

Import HTML from main HTML

You can import HTML using <link rel="import">

main HTML

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

You have to append elements you import if you want to use it.

Imported HTML (stuff.html)

<nav>
    <ul>
        <li>page 1</li>
        <li>page 2</li>
        <li>page 3</li>
    </ul>
</nav>

<script>
    var importDoc = document.currentScript.ownerDocument; // imported HTML
    var mainDoc = document; // main HTML
    var nav = importDoc.querySelector('nav');
    mainDoc.querySelector('.navi-outer').appendChild(nav.cloneNode(true));
</script>

You can also use imported elements from main HTML like that.

main HTML

var link = document.querySelector('link[rel="import"]');
var nav = link.import.querySelector('nav');
document.querySelector('.navi-outer').appendChild(nav.cloneNode(true));

Import CSS in imported HTML

Imported HTML

<link rel="stylesheet" href="/path/to/imports/stuff.css">

You have to append link tag if you want to apply that style.

Imported HTML (stuff.html)

<link rel="stylesheet" href="/path/to/imports/stuff.css">
<script>
    var importDoc = document.currentScript.ownerDocument; // imported HTML
    var mainDoc = document; // main HTML
    var style = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(style.cloneNode(true));
</script>

Javascript context in imported HTML

You can use those contexts in imported document.

  • imported HTML context using document.currentScript.ownerDocument.
  • main HTML context using document

Notice

  • Resources from other origins need to be CORS-enabled.
  • Browser of course will cache each document you import.
  • Javascript are parsed and executed once if you import same url html twice.
  • Do not block main document parsing.
  • You have to add css and html tag after import html.

References