模拟PHP包括无PHP(Simulate PHP Include Without PHP)

我想包括在多个页面相同的导航菜单，但是我没有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文件。检查多米尼克P.的答案SSI的书面记录。 SSI过的JavaScript或帧的好处是，它不要求用户必须激活JS - 其中很多用户不 - 它也不会存在任何困难航行。
帧。你既可以使用标准的框架把导航在其自己单独的文件，并用正确的造型，将是无缝的。你也可以使用一个iframe中放置你的导航站点的任意部分，就像一个侧边栏或什么的。该缺点框架，特别是标准框架，是他们往往使书签，链接和前进/后退按钮行为古怪。从正面看，帧不需要浏览器达标或服务器的支持。
JavaScript的。你可以参考任何其他的答案为JS解决方案的优秀的解释，特别是如果你使用jQuery。但是，如果你的网站是没有其他足够的动力，您的用户将要启用JavaScript，这将意味着大量的观众不会看到菜单在所有 - 坏的，绝对。

Answer 2:

是使用.load jQuery的AJAX功能

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

这样，你的代码保持干净，你可以编辑包括单独的HTML文件，就像PHP。

Answer 3:

您应该考虑AJAX这个任务。包括第三方库像jQuery和加载单独的HTML文件中的占位符，通过ID针对他们。

例如，在主HTML页面：

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

此外，在主HTML，但在头部分：

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

但是你最好的选择将切换到支持PHP或任何其他服务器端包含托管。这会让你的生活变得更加简单。

Answer 4:

看看服务器端包含。我没有一大堆的与他们的经验，但是从我记得，它们被设计成一个解决方案，只是你的问题。

Answer 5:

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