This content originally appeared on Go Make Things and was authored by Go Make Things
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.
The Vanilla JS Academy is a project-based online JavaScript workshop for beginners. Click here to learn more.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-11-14T14:30:00+00:00) HTML includes using web components and iframes. Retrieved from https://www.scien.cx/2022/11/14/html-includes-using-web-components-and-iframes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.