HTML Loader

This script uses JavaScript to make snippets of HTML appear on all the pages you paste this script into.

Demo

Directions

Add the following code to the end of your webpage, just above the </body> tag.

Then save the following to a file named html_loader.js, in the same folder as your webpage.

/// // HTML Loader by netfriend // Released under the Unlicense - https://unlicense.org/ /// /// // SETTINGS /// const html_templates = { }; /// // CODE /// // Don't edit below this line unless you know what you're doing! /// (function () { const domParser = new window.DOMParser(); Object.keys(html_templates).map(function (element) { const url = html_templates[element]; fetch(url).then((response) => response.text()) .then(function (html) { let parsedHTML = domParser.parseFromString(html, "text/html"); let pageElement = document.getElementById(element); if (pageElement.replaceChildren !== undefined) { pageElement.replaceChildren(...parsedHTML.body.childNodes); } else { while (pageElement.firstChild) { pageElement.removeChild(pageElement.firstChild); } pageElement.append(...parsedHTML.body.childNodes); } document.head.appendChild(parsedHTML.head); }); }); }());

Inside html_loader.js, between const html_templates = { and };, add a new line for every HTML snippet you want to insert.

For example:

const html_templates = { "footer": "/templates/footer.html", }

will insert the contents of the file /templates/footer.html when it finds the following tag on your webpage, replacing everything inside:

If the template also has a <head> tag, its contents will be added to the page's <head> tag.

Don't forget the comma at the end!