HTML includes using web components and iframes
This article is part of a series on HTML includes. Last week, we looked at how to include external HTML using iframes, and how to build a web component to fetch remote HTML.
Today, we’re going to combine the two techniques, courtesy of Andy Bell.
We’ll start with our custom include-html
element.
<include-html path="about.html">
<a href="about.html">Learn more about me.</a>
</include-html>
Inside the constructor()
for our web component class, we’ll remove the #getHTML()
method entirely.
Instead, we’ll use the Element.innerHTML
property to inject an iframe
with our path
as the src
. We’ll include the onload
technique to pop the iframe
content out into the main document.
/**
* The class constructor object
*/
constructor () {
// Always call super first in constructor
super();
// Get the source HTML to load
let path = this.getAttribute('path');
if (!path) return;
// Render HTML
this.innerHTML = `<iframe src="${path}" onload="this.before(...(this.contentWindow.document.body||this.contentWindow.document).children);this.remove()">`;
}
This provides us with an extra layer of resilience, and prevents use from having to make a fetch()
call. We just work with what the browser already does.
You can download the source code on GitHub.
You’ll need to run a web server to make this work, which you can do using the command line or running a GUI tool like MAMP.
Tomorrow, we’ll learn how to use includes using compilers.