👓 HTML Includes That Work Today | Filament Group, Inc.,

As long as I have been working on the web, I’ve desired a simple HTML-driven means of including the contents of another file directly into the page. For example, I often want to append additional HTML to a page after it is delivered, or embed the contents of an SVG file so that we can animate and style its elements. Typically here at Filament, we have achieved this embedding by either using JavaScript to fetch a file and append its contents to a particular element, or by including the file on the server side, but in many cases, neither of those approaches is quite what we want. This week I was thinking about ways I might be able to achieve this using some of the new fetch-related markup patterns, like rel="preload", or HTML imports, but I kept coming back to the same conclusion that none of these give you easy access to the contents of the fetched file. Then I thought, perhaps a good old iframe could be a nice primitive for the pattern, assuming the browser would allow me to retrieve the iframe's contents in the parent document. As it turns out, it sure would!