如何模拟本地站点的SSI [英] How to mimic SSI for a local site
问题描述
我在一个本地站点上有一个导航栏代码块，而没有要在很多页面上使用的Web服务器.我想有一个单独的文件，其中包含所有页面引用的导航栏的HTML.这样，每当需要对导航栏进行更新时，只需进行一次即可.
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.
我正在使用以下Bootstrap模板: https://bootstrapmade.com/demo/Regna/
I'm using this Bootstrap template: https://bootstrapmade.com/demo/Regna/
几年前，使用不同类型的导航栏系统，我能够使用Javascript实现此目的.我只是在想要导航栏的地方引用了文件，如下所示:
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>
menu3.js就像这样:
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>");
实际上效果很好.现在，我正在使用其他导航栏设置，但该技术无效.页面上没有任何显示.由于它是本地站点，所以我不能使用PHP或SSI或其他我所熟悉的东西.
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?
推荐答案
使用本地站点上的外部资源将触发相同来源策略警告，如果
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.
由于它是您自己的本地页面，我建议您仅使用iframe并加载外部托管的header.html，因为它可以为您提供最快的速度.
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.
否则，建议您使用npmjs模块(例如 local-网络服务器，并配置上述链接文档中概述的CORS和相同的原始策略
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
这篇关于如何模拟本地站点的SSI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
