Search code examples
javascripthtmlheaderconventions

How to create an html header for every file in a project using javascript?

I'm working on a simple GitHub pages site using HTML and javascript. Since pages do not offer support for PHP or SSI includes for an HTML header from a separate HTML file, I need to write a script which will create the header images an establish the links in the menu ribbon.

Suppose for the sake of understanding this website is composed of three files whose paths are:

root/index.html
root/A/pageA.html
root/B/pageB.html

The header should have a link to each of these files.

The only solution I have been able to come up with is to use these in all files:

<a href='https://somewhere.something/index.html'>Index</a>
<a href='https://somewhere.something/A/pageA.html'>A</a>
<a href='https://somewhere.something/B/pageB.html'>B</a>

I just was unsure if this is good practice!

If there is a way to accomplish the same effect which is more conventional I would love to hear it.

Solution

  • Below SO snippet not works, but here is working example - click on left menu, look into page source)

    async function load(url) {
  let html = await (await fetch(url)).text();
  pageBody.innerHTML = html;
}

let page = location.search.substr(1) || 'index';

load(page + '.html');
    <h1>My site</h1>
<ul>
  <li><a href="?index" >Main</a></li>
  <li><a href="?A/pageA" >A</a></li>
  <li><a href="?B/pageB" >B</a></li>
</ul>

<div id="pageBody">