如何模拟本地站点的SSI

Question

I have a block of code for a navbar on a local only site without a web server that I want to have on many pages. I would have like to have a separate file that has the HTML for the navbar that all the pages reference. That way whenever an update to the navbar needs to be made, it only has to be done once.

I'm using this Bootstrap template: https://bootstrapmade.com/demo/Regna/

Years ago, using a different type of navbar system, I was able to achieve this with Javascript. I just referenced the file where I wanted the navbar like this:

<script type="text/javascript" src="js/menu3.js"></script>

And menu3.js was something like this:

document.write("<div style='float: left' id='my_menu' class='sdmenu'>");

document.write("<div id='section1' class='collapsed'>");
document.write("<span class='menuheader'>SECTION 1</span>");
document.write("<a href='page1.html#anchor1'>Option 1</a>");
document.write("<a href='page1.html#anchor2'>Option 2</a>");
document.write("<a href='page1.html#anchor3'>Option 3</a>");
document.write("</div>");

document.write("<div id='section1' class='collapsed'>");
document.write("<span class='menuheader'>SECTION 2</span>");
document.write("<a href='page2.html#anchor1'>Option 1</a>");
document.write("<a href='page2.html#anchor2'>Option 2</a>");
document.write("<a href='page2.html#anchor3'>Option 3</a>");
document.write("</div>");

That actually worked nicely. Now, I'm working with a different navbar setup, and that technique doesn't work. Nothing displays on the page. Since it's a local site, I can't use PHP or SSI or anything else that I'm familiar with.

What can I do to pull in code from an external file on a local site?

Answer 1

using external resources on your local site will trigger a same origin policy warning and can also be prohibited by the external page if CORS is not setup correctly.

Since its a local page for yourself, I would suggest just using an iframe and load your external hosted header.html as it gives you what you want the fastest.

Otherwise I'd suggest you setup a local webserver with an npmjs module like local-webserver and configure CORS and the same origin policy as outlined in the above linked documentations