iframe 中的导航栏答案

【问题标题】：Navbar in an iframeiframe 中的导航栏
【发布时间】：2018-10-19 13:15:34
【问题描述】：

我正在尝试建立一个带有顶部导航栏的仅限本地的网站。由于该站点将是多个页面，并且导航栏选项可能会经常更改，我想我可以使用 SSI 或类似的东西来引用所有页面。我在这里问过这个问题：How to mimic SSI for a local site

那里有人建议我使用 iframe，所以这就是我现在正在尝试的。但是，当菜单下拉时，它会停在 iframe 的底部。有没有办法让菜单 div 从 iframe 中扩展出来？

【问题讨论】：

没有。当您说本地时，您的意思是来自硬盘/文件系统？
您有很多选择，最好/最简单的方法之一是设置本地 PHP 环境并将您的页眉/页脚文件拆分。或者，请参阅此线程：stackoverflow.com/questions/8988855/…
@mplungjan 是的。这是一个网络驱动器上的站点。
@AlexanderWigmore 我无法设置 PHP 环境。没有为此设置真正的服务器环境。
那么我建议您将导航栏作为一个 js 文件包含在上面发布的链接中，该文件使用滚动条更新 div 的 innerHTML：stackoverflow.com/a/15250208/295783

标签： html css localhost

【解决方案1】：

添加<div class="nav"></div>
添加<script src="nav.js"></script>
使用这样的东西：

var navDiv = document.getElementById("nav");
if (navDiv) {
  var active = "/page3"; // location.pathname
  var navHtml = `
    <ul>
      <li class="${active=="/home"?"active":""}">Home</li>
      <li class="${active=="/about"?"active":""}">About</li>
      <li class="${active=="/page1"?"active":""}">Page1</li>
      <li class="${active=="/page2"?"active":""}">Page2</li>
      <li class="${active=="/page3"?"active":""}">Page3</li>
      <li class="${active=="/page4"?"active":""}">Page4</li>
      <li class="${active=="/page5"?"active":""}">Page5</li>
    </ul>`;
  navDiv.innerHTML = navHtml;
  //  document.querySelector(".active").scrollIntoView();

  var el = document.querySelector(".active")
  navDiv.scroll({
    top: el.offsetTop - 10,
    behavior: 'smooth'
  });
}

.active {
  color: red
}

#nav {
  overflow: auto;
  height: 50px;
  width: 100px;
  border: 1px solid black;
}

&lt;div id="nav"&gt;&lt;/div&gt;

【讨论】：