HTML import

HTML import is part of web component framework and its specification is in Draft stage. HTML import can be used to import another html document in current document. Currently only Chrome and Opera support it.

Here is sample code using HTML import

<h2>Imported stuff</h2>
<div id="container"></div>
<link id="import1" rel="import" href="/api/html-import-hello-world.html">

<script>
var linkElement = document.querySelector('#import1');
var importedDoc = linkElement.import;
var content = importedDoc.querySelector('#content');
document.querySelector('#container').appendChild(content.cloneNode(true));
</script>
refresh

Few points to note

  1. Imported document does not get inserted in current document’s html on its own. It has to be handled using Javascript.
  2. We are using linkElement.import to get imported document object.
  3. To get dom element inside importedDoc, we are using importedDoc.querySelector(). After that we can clone these to insert in current page DOM.

Specification and Browser compatibility

SpecificationStatusCategories
HTML ImportsW3C Working DraftDOM, HTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 36+ NoNoNoNoYes 23+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ NoNoNoYes 33+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments