无需服务器，如何从外部HTML文件加载导航栏？

我完全懂你的痛点——离线CD网站要复用导航栏，iframe/object的滚动条实在太影响美观，又不能用服务器端技术，这就给你几个纯前端的解决方案，完美适配你的场景：

方案一：用Fetch API动态加载导航栏（推荐） #

这个方法直接把导航栏的HTML内容嵌入到主页面中，没有框架的滚动条问题，样式还能和主页面完全统一。

步骤： #

1. 在每个需要导航栏的页面里，添加一个容器用来放导航栏：

<div id="navbar-container"></div>

2. 在页面底部（或者容器后面）添加这段JavaScript代码：

// 加载导航栏文件
fetch('navbar_file.html')
  .then(response => response.text())
  .then(data => {
    // 把导航栏内容插入到容器里
    document.getElementById('navbar-container').innerHTML = data;
  })
  .catch(error => {
    console.error('加载导航栏失败:', error);
  });

注意事项： #

• 确保你的navbar_file.html里只保留导航栏的核心代码，不要包含<html>、<head>、<body>这些全局标签，就用你给出的那段内容就行：

<a href="index.html"><div id="button">Acasă</div></a>
<div class="dropdown" id="button">Prezentare
  <div class="dropdown_content">
    <!-- 你的下拉菜单内容 -->
  </div>
</div>

• 导航栏的样式要放在单独的CSS文件里（比如navbar.css），然后所有页面都引用这个CSS文件，这样样式能保持一致。
• 如果用Chrome打开本地文件（CD里的内容是file://协议），默认会限制Fetch访问本地文件，你可以用这个启动参数打开Chrome：chrome.exe --allow-file-access-from-files；Firefox对本地文件的支持更好，不用额外设置。

方案二：用XMLHttpRequest兼容旧浏览器 #

如果需要兼容更老的浏览器（比如IE11），可以用这个替代方案：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'navbar_file.html', true);
xhr.onreadystatechange = function() {
  // 请求成功完成时，插入导航栏内容
  if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById('navbar-container').innerHTML = xhr.responseText;
  }
};
xhr.send();

这个方法和方案一的效果完全一样，只是兼容性更好，适合需要支持旧浏览器的场景。

为什么这个方案比iframe/object好？ #

• 没有多余的滚动条，导航栏和主页面完全融合，视觉上更统一
• 导航栏的元素属于主页面的一部分，CSS和JavaScript可以直接控制，不用跨框架操作
• 完全离线可用，不需要任何服务器端技术，完美适配刻录到CD的需求

内容的提问来源于stack exchange，提问作者hydravink