Import HTML File, Including CSS

Question

Good day.

I want to be able to import a HTML element I have designed into my document. I would use this for headers and footers. Instead of having to edit EVERY document on the server when I want to change something with the headers and footers, I would just like to edit the one file, which would change all of the documents. I have tried <iframe> by embedding the page with only the header on, but there is too many things that could go wrong (considering half of my users will be on varied mobile devices).

How can I import a HTML file on my server into another file, without duplicating it?

Answer 1

You might want to take a look at Webcomponents! Webcomponents allow you to write your own controls and import them without having to copy paste them in your webpages everywhere. For example, if you have your own header control you can define it in a file (e.g. myHeader.js) as such:

class MyHeader extends HTMLElement
{
  /* Your header style and layout */
}
window.customElements.define('my-header', MyHeader );

and then later reference in your HTML:

<!-- Include control -->
<script src="controls/myHeader.js"></script>


<!-- Later in your file -->
<my-header> </my-header>

That way, you don't have to copy paste the entire control in every file while also being able to reuse the control.