我想在多个页面上包含相同的导航菜单，但是我没有 PHP 支持，也不能以任何其他方式影响我的服务器。
我想避免简单地将 html 复制并粘贴到所有页面上，因为这会使更新菜单变得很痛苦。
我能想到的两个选项如下：
1）让所有内容都存在于一个页面上，然后根据附加到 url 的关键字确定要显示的内容：
example.com/index?home
example.com/index?news
2）包含一个javascript文件，该文件具有写出菜单并在每个页面上调用该函数的功能
function setupMenu() {
$("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>");
}
使用选项 1，更新过程将包括在一页上编辑一个导航菜单
使用选项 2，更新将意味着更改 javascript 文件中的函数
我对选项 1 的担忧是该页面必须加载许多不需要显示的内容。我对选项 2 的关注可能看起来微不足道，但代码可能会变得混乱。
有什么理由这样做会比另一种更好吗？还是我缺少第三个更好的选择？
你有几个选择，每个都有自己的优点和缺点：
服务器端包含，或 SSI。如果您没有 PHP，那么您很可能也没有 SSI，并且此选项需要对您的 .htaccess 文件进行一些令人讨厌的处理。查看 Dominic P. 的答案以获取 SSI 的文章。SSI 优于 JavaScript 或 Frames 的好处是它不需要用户启用 JS（很多用户没有启用），而且它也不存在任何导航困难。
帧。您可以使用标准框架将导航放在其自己的单独文件中，并且使用正确的样式将是无缝的。您还可以使用iframe将导航放置在网站的任意部分，例如侧边栏或其他任何地方。框架，特别是标准框架的缺点是它们往往会使书签、链接和前进/后退按钮的行为变得奇怪。从好的方面来说，框架不需要浏览器合规性或服务器支持。
JavaScript。您可以参考任何其他答案以获得对 JS 解决方案的出色解释，尤其是在您使用 jQuery 时。但是，如果您的网站在其他方面不够动态，以至于您的用户希望启用 JavaScript，这将意味着您的大量观众根本看不到菜单 - 很糟糕，肯定的。
是的，使用 .load jQuery ajax 函数
$('#result').load('ajax/menu.html');
这样你的代码就会保持干净，你可以像 PHP 一样在单独的 HTML 文件中编辑包含。
您应该为此任务考虑 AJAX。包括第三方库，如 jQuery，并在占位符中加载单独的 HTML 文件，按 ID 定位它们。
例如，在您的主 HTML 页面中：
<div id="mymenu"></div>
此外，在您的主 HTML 中，但在 HEAD 部分中：
$('#mymenu').load('navigation.html');
但最好的选择是切换到支持 PHP 或任何其他服务器端包含的主机。这会让你的生活轻松很多。
查看服务器端包含。我对它们没有太多经验，但据我回忆，它们旨在解决您的问题。
您可以使用 HTML 导入http://w3c.github.io/webcomponents/spec/imports/
这是来自http://www.html5rocks.com/en/tutorials/webcomponents/imports/的示例
warnings.html包含
<div class="warning">
<style scoped>
h3 {
color: red;
}
</style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
<div class="outdated">
<h3>Heads up!</h3>
<p>This content may be out of date</p>
</div>
然后index.html可以包含
<head>
<link rel="import" href="warnings.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>