Import-html.js NPM

import-html.js

npm.io npm.io

for frontend beginners who didn't know framework to use the import feature in HTML.

Read this in other languages: English, 繁體中文.

Usage

load the script in HTML:

<body>
  ...
  <!-- place before the end of body tag is suggested -->
  <script src="import-html.min.js"></script>
</body>

prepare template HTML:

<header>
  <h1>Awesome Page</h1>
</header>

<footer>
  <p>© 2018 UXabc.</p>
</footer>

import the template by using HTML comment with special syntax :

<body>
  <!-- import header.html -->
  Page content
  <!-- import footer.html -->
</body>

the page will be:

<body>
  <header>
    <h1>Awesome Page</h1>
  </header>
  Page content
  <footer>
    <p>© 2018 UXabc.</p>
  </footer>
</body>

Features

Light-weight:
support nested import.
when all templates loaded, import-html-loaded class will be added to <html>.
JS callback by using ImportHTML.ready(callback)

Tips

for some situations, you probably encounter flicker issue. for that, set opacity to 0 to hide all HTML elements and reset opacity after all templates loaded by using ImportHTML.ready:

<head>
  <!-- import include/head.html -->
  <script>document.documentElement.style.opacity = 0;</script>
</head>
<body>
  ...
  <script src="import-html.min.js"></script>
  <script>
    ImportHTML.ready(function() {
      document.documentElement.style.removeProperty('opacity');
    });
  </script>
</body>

Q&A

Why not use browser native Promise?

to support legacy browsers like IE.

Todo

demo page
more detail description
can pass variables

@infinitebrahmanuniverse/nolb-imp @everything-registry/sub-chunk-1908

1.1.0

6 years ago

1.0.1

6 years ago