Simple way to include the raw content of an HTML file on your DOM
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
Gruntfile.js
README.md
bower.json
footer.html
header.html
index.html
package.json

README.md

<html-include>

<html-include> is a very simple Web Component for including the raw content of an HTML file.

It's somewhat similar to doing a PHP include for a plain html file (looks familiar? <?php include('header.html'); ?>), but on the browser side.

It looks like this:

<html-include src="header.html"></html-include>

Whatever content you load with it, it will replace the <html-include>'s outerHTML.

This is a vanilla-js component and it has no dependencies.

Demo

Check a demo here: http://chris-l.github.io/html-include/

Performance

Actually, perhaps you would get better performance by just having everything on your main html and not using this. ;)

Using <html-include> means it will make an extra request for each file it loads.

But, if you are not expecting certain files to change, you can configure your server cache control for those files to improve performance and reduce requests.

If it's an option, try to use server-side includes instead. (For static sites, you could use a preprocessor, like jekyll or harpjs)

Installation

You can just copy the dist/html-include.min.js file somewhere onto your server, or you can use bower:

bower install --save html-include

Usage

First, make sure you have the webcomponent's polyfill:

<script>
  if ('registerElement' in document
    && 'createShadowRoot' in HTMLElement.prototype
    && 'import' in document.createElement('link')
    && 'content' in document.createElement('template')) {
    // We're using a browser with native WC support!
  } else {
    document.write('<script src="https:\/\/cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.5/webcomponents.min.js"><\/script>')
  }
</script>

Then you can choose to either include the HTML, like a regular web component:

<link rel="import" href="html-include.html">

Or actually, you can just include the script:

<script src="html-include.min.js"></script>

(just do one of the two, don't do both)

Do it immediately after the webcomponents polyfill, and before any other scripts. (So it can capture the DOMContentLoaded event)

After that you can use it like this:

<html-include src="header.html"></html-include>

Whatever content header.html has, it will replace the actual html-include tag in the DOM.

If the file in the src can't be read, then it will be replaced by an empty string.

It will load the content using a XMLHttpRequest, and prevent emitting the DOMContentLoaded event (and the window load event) until all the html-include elements (with the src attribute) on the DOM are resolved. At that moment, a DOMContentLoaded event will be emitted, and it will see the fully composed html.

Options

Attribute Options Default Description
src string '' Name of the file to be included.
prevent-cache boolean false Add a random string as query parameter to the src file, to prevent cache.

License

MIT License