如何模拟本地站点的SSI

Question

我在一个本地站点上有一个导航栏代码，而没有要在很多页面上使用的Web服务器。 我想有一个单独的文件，其中包含所有页面引用的导航栏的HTML。 这样，每当需要对导航栏进行更新时，只需进行一次即可。

我正在使用此Bootstrap模板： https : //bootstrapmade.com/demo/Regna/

多年前，使用其他类型的导航栏系统，我能够使用Javascript实现此目的。 我只是在想要导航栏的地方引用了文件，如下所示：

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

menu3.js是这样的：

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>");

实际上效果很好。 现在，我正在使用其他导航栏设置，但该技术无效。 页面上没有任何显示。 由于它是本地站点，因此无法使用PHP或SSI或其他我所熟悉的东西。

如何从本地站点上的外部文件中提取代码？

Answer 1

如果未正确设置CORS，则在本地站点上使用外部资源将触发相同的原始策略警告 ，并且也可能被外部页面禁止。

由于它是您自己的本地页面，因此建议您仅使用iframe并加载外部托管的header.html因为它可以为您提供最快的速度。

否则，我建议您使用npmjs模块（例如local-webserver）设置本地网络服务器，并配置CORS和上述链接文档中概述的原始策略