Getting Start HTML Import

Nov 1, 2014

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.

Notice

References