3 ms·
This is the closest we can do today: -- index.html <html> <body> <script src="header.js"></script> <main> <h1>Hello includes</h1> </ma
by Kuyawa 1y ago
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
- Bjartr 1y agoYou 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 1y agoPretty sure it is possible without JavaScript, too.
- Kuyawa 1y agoOr 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