Question

我想在多个页面上包含相同的导航菜单，但是我没有PHP支持，也不能以任何其他方式影响我的服务器。

我想避免简单地将html复制并粘贴到所有页面上，因为这会使菜单更新变得痛苦。

我能想到的两个选项如下：

1）在一个页面上存在所有内容，然后根据添加到网址的关键字确定要显示的内容：

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的关注可能看起来微不足道，但是代码可能会变得混乱。

有什么理由这样做会比另一种更好吗？或者我缺少第三个优越的选择？

Answer 1

您有几个选择，每个选项都有自己的优点和缺点：

服务器端包含或SSI。如果您没有PHP，那么很可能您没有SSI，并且此选项需要使用.htaccess文件进行一些令人恼火的麻烦。检查Dominic P.的SSI写作答案。 SSI优于JavaScript或Frames的好处是它不需要用户启用JS - 很多用户都没有 - 并且它也没有任何导航困难。
帧。您可以使用standard frames将导航放在其自己的单独文件中，并使用正确的样式将其无缝化。您还可以使用iframe将导航放置在网站的任意部分，例如侧边栏或其他任何内容。帧的缺点，特别是标准帧，是它们倾向于使书签，链接和前进/后退按钮表现奇怪。从好的方面来说，框架不需要浏览器合规性或服务器支持。
的JavaScript。您可以参考任何其他答案，以获得对JS解决方案的出色解释，特别是如果您使用的是jQuery。但是，如果您的网站没有足够的动态以至于您的用户希望启用JavaScript，那么这意味着大量的观看者根本看不到菜单 - 很糟糕，肯定是。

Answer 2

是使用.load jQuery ajax函数

$('#result').load('ajax/menu.html');

这样你的代码就可以保持干净，只需像PHP那样在单独的HTML文件中编辑包含。

Answer 3

您应该考虑使用AJAX执行此任务。包括像jQuery这样的第三方库，并在占位符中加载单独的HTML文件，按ID进行定位。

例如，在您的主HTML页面中：

<div id="mymenu"></div>

此外，在您的主HTML中，但在HEAD部分：

$('#mymenu').load('navigation.html');

但你最好的选择是切换到支持PHP或任何其他服务器端包含的托管。这将使您的生活更轻松。

Answer 4

结帐Server Side Includes。我对它们没有太多的经验，但从我记得的情况来看，它们只是为了解决你的问题而设计的。

Answer 5

您可以使用HTML Imports 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>

Answer 6

服务器端包括：http://www.freewebmasterhelp.com/tutorials/ssi/

在没有PHP的情况下模拟PHP包含

6 个答案: