Including content from other files in your HTML (“HTML Includes”)

Nice find by Scott Jehl from Filament Group: Instead of fetching files over XHR and then injecting their contents, you can also use an iframe + leverage its onload event to include the contents of any other file directly into the current web page.

<iframe
  src="signal.svg"
  onload="this.before((this.contentDocument.body || this.contentDocument).children[0]);this.remove()"
></iframe>

The example above loads up a .svg, but you can also use it to include other pieces of markup. Above that you can combine it with [loading="lazy"].

This is “Server Side Includes” all over again 😅

HTML Includes That Work Today →