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

使用本地站点上的外部资源将触发same origin policy warning，如果CORS的设置不正确，外部页面也可能会禁止它。

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

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

如何模拟本地站点的SSI

1 个答案: