logoalt Hacker News

Kuyawa • 05/03/2025 • 3 replies • view on HN

This is the closest we can do today:

  -- index.html

  <html>
  <body>
    <script src="header.js"></script>
    <main>
      <h1>Hello includes</h1>
    </main>
    <script src="footer.js"></script>
  </body>
  </html>

  -- header.js

  document.currentScript.outerHTML = `
  <header>
    <h1>Header</h1>
  </header>`

  -- footer.js

  document.currentScript.outerHTML = `
  <footer>
    <h1>Footer</h1>
  </footer>`
Scripts will replace their tags with html producing a clean source, not pretty but it works on the client

Replies

Kuyawa • 05/05/2025

Or this:

  <body>
    <include src="header.html"></include>
    <main>
      <h1>Hello includes</h1>
    </main>
    <include src="footer.html"></include>
  </body>
  <script>
  (async function include(){
    const objs = document.getElementsByTagName('include')
    const tags = Array.from(objs)
    for(tag of tags){
      const src  = tag.getAttribute('src')
      const data = await fetch(src)
      const html = await data.text()
      tag.outerHTML = html
    }
  })()
  </script>
* beware autoclosing tags won't work
Bjartr • 05/03/2025

You could even have a server wrap static html resources in that js if you request them a certain way, like

<script src="/include/footer.html">

For /footer.html

But then you probably might as well use server side includes

johnisgood • 05/03/2025

Pretty sure it is possible without JavaScript, too.