/HTMLInclude

A tiny 1kb script that brings includes to HTML

Primary LanguageJavaScriptMIT LicenseMIT

HTMLInclude

Because, One simply does not

<body>
  <include src="header.html"></include>
  Content
  <include src="footer.html"></include>
</body>

But now you can

<body>
  <div data-include="header.html"></div>
  Content
  <div data-include="footer.html"></div>
  
  <script src="js/HTMLInclude.min.js"></script>
</body>

DEMO

Also, you can use data-replace to swap strings from within the data-include html.

<div data-include="greeting.html" data-replace="%name%:Mike"></div>
<div data-include="greeting.html" data-replace="%name%:Frank"></div>
<div data-include="greeting.html" data-replace="%name%:Bob"></div>
greeting.html
<h1>Hello %name%!!</h1>
output
<h1>Hello Mike!!</h1>
<h1>Hello Frank!!</h1>
<h1>Hello Bob!!</h1>

NOTE: If there are multiple instances of the string %name% then all will be replaced

DEMO

You can swap multiple strings at a time

<div data-include="welcome.html" data-replace="%welcome%:Hello, %name%:Mike, %emotion%:Happy"></div>
welcome.html
<h1>%welcome% %name%!!</h1>
<p>I am very %emotion% to meet you!</p>
output
<h1>Hello Mike!!</h1>
<p>I am very Happy to meet you!</p>

DEMO

The most practical use case for the data-replace is when using a templating engine like mustache

<div data-include="countries.html" data-replace="%country%:uk"></div>
<div data-include="countries.html" data-replace="%country%:france"></div>
<div data-include="countries.html" data-replace="%country%:germany"></div>

DEMO

You can also lazyload includes by passing data-lazy="100" the number is the offset, eg. the amount of pixels from the bottom of the screen before the include will load. (this number can be negative and the include will load after it has scrolled into view by that amount of pixels)

<div data-include="templates/countries.html" data-replace="%country%:uk" data-lazy="100" ></div>
<div data-include="templates/countries.html" data-replace="%country%:france" data-lazy="0" ></div>
<div data-include="templates/countries.html" data-replace="%country%:germany" data-lazy="-40" ></div>

Includes have no height, because they are empty (unless you add "loading..."), and this might cause following includes to be evaluated as "in the viewport" when they aren't. So you might want to add a fake height to includes before they are loaded like so

[data-include]{
	min-height: 100px;
}

DEMO

You can also nest includes, you'll need to call the HTMLInclude() function again

<div data-include="nested.html"></div>
nested.html
<div data-include="footer.html"></div>
<script>HTMLInclude();</script>

DEMO