如何处理超过 10 页的静态页眉/页脚？答案

【问题标题】：How to deal with a static header/footer with 10+ pages?如何处理超过 10 页的静态页眉/页脚？
【发布时间】：2016-05-19 05:04:22
【问题描述】：

如何处理在我的 10 多页中不变的静态页眉/页脚。请记住，所有这些页面共享相同的页眉/页脚。所以目前如果我从页眉/页脚更改一个内容，我需要转到所有其他页面才能进行相同的更改。

我希望实现的基本上是更改一次并将更改反映在所有页面上。

我正在考虑在 .txt 文件中添加页眉/页脚 (HTML) 并以 JavaScript 方式调用该 .txt 文件。但我很确定在 .txt 文件中包含 html 并通过 js 调用该 .txt 文件是一种不好的做法和安全风险。

【问题讨论】：

当我遇到同样的情况时，我用 PHP 制作页面（一个用于页眉，一个用于页脚）并将它们包含在所有其他 10 个页面中。你有这种可能吗？
是的，PHP 是一种选择，但我试图避开这条路线。
啊，我明白了……您可以使用 jQuery 的 .load() 函数，但请记住，这将在每个页面请求时向服务器添加两个额外的调用。 (api.jquery.com/load)
是的 jquery 可能是最好的选择。想知道这个解决方案是否被认为是一种好的做法。
这不是一个坏习惯，这就是 AJAX 所说的日常工作。如果您有一个高流量的网站，您可能希望尽量减少对服务器的调用次数，但现在我们正在讨论性能/优化。

标签： javascript html css

【解决方案1】：

您需要创建单独的页眉和页脚 html 文件，并且需要在所有页面上包含这些文件。这样你就可以控制它了。

查看下面如何在另一个 html 文件中包含一个 html 文件

http://www.w3schools.com/howto/howto_html_include.asp

Include another HTML file in a HTML filehtml 文件

http://www.hongkiat.com/blog/html-import/

另一种方法是您可以创建 php 文件而不是 html，并轻松地将常见的 php 文件包含在另一个中

http://www.w3schools.com/php/php_includes.asp

【讨论】：

在将 html 文件包含在另一个 html 中时我应该担心的任何安全问题？
@john 这是一个非常宽泛的问题，但如果您使用的是服务器端技术，则并非如此（无论如何，大型网站都是这样构建的）
是的..没什么大问题。您将在 PHP（服务器端）中使用附加页眉和页脚，输出将始终是单个页面而不是 iframe。所以，没有安全漏洞。

【解决方案2】：

您可以使用角度指令。

var myApp = angular.module('myApp', []);

myApp.directive('mainNavigation', function(){
  return {
    restrict: 'E',
    templateUrl: 'partials/navigation.html'
  }
});

然后您将使用 ng-app="myApp 调用 angular，然后将指令包含在您需要它们的区域中。在这种情况下，您将拥有：

<main-navigation></main-navigation>

【讨论】：

【解决方案3】：

你可以使用 jQuery 的 .load() 函数。

请记住，这将在每个页面请求时向服务器添加两个额外的调用。 (api.jquery.com/load)

// add this snippet somewhere in your page (inside <script> tags)
$(function() {
  $("header").load("header-url");
  $("footer").load("footer-url");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  Header
</header>
<hr/>
<div id="content">
  static page content goes here
</div>
<hr/>
<footer>copyright</footer>

【讨论】：