for frontend beginners who didn't know framework to use the import feature in HTML.
Read this in other languages: English, 繁體中文.
- 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
<!-- import file.html -->:
<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>
-
Light-weight:
- support nested import.
- when all templates loaded,
import-html-loadedclass will be added to<html>. - JS callback by using
ImportHTML.ready(callback)
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>
Why not use browser native Promise?
to support legacy browsers like IE.
- [ ] demo page
- [ ] more detail description
- [ ] can pass variables