我们如何避免在每个 html 页面中重复页眉和页脚代码答案

【问题标题】：how can we avoid header and footer code repeating in each html pages我们如何避免在每个 html 页面中重复页眉和页脚代码
【发布时间】：2020-09-25 13:50:19
【问题描述】：

我有大约十个 html 页面，每个页面也有相同的页眉和页脚标记我可以有一个完整的页眉和页脚的页面，我将从其他 html 页面引用该特定页面。

【问题讨论】：

标签： html master-pages dhtml

【解决方案1】：

如果您不关心禁用了 JavaScript 的用户，或者正在使用某些移动平台，您可以使用 JavaScript 来做到这一点。

headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

page.html

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

但不要这样做，它对用户不友好，也不专业。只需坚持使用 php，或者构建一个不需要稍后编辑的可靠模板。

【讨论】：

你可以用模板构建吗

【解决方案2】：

您可以通过使用像 PHP 这样的服务器端语言或其他无数种不同语言中的一种来对页面进行预处理。大致如下：

<?php include 'header.html'; ?>

... page contents...

<?php include 'footer.html'; ?>

【讨论】：

感谢您的回复，这是他们在客户端不使用任何服务器端控件的任何方式。
@mahesh 我猜你可以用 Javascript 来做，如果你愿意的话（通过 AJAX 获取页眉和页脚文件，注入 DOM），但我真的不会不推荐它。无论如何，您仍然必须以这种方式重复一定数量的 HTML 序言。
我在服务器端使用 asmx webservices 。
您可以在客户端上使用 XSLT 执行此操作。所有现代浏览器都有不错的 XLST 支持，包括 IE6。 :)
是否有任何方式使用 contentplaceholder，例如在 asp.net 中用于 html 页面的控件

【解决方案3】：

您的服务器端脚本语言是什么？您可以执行所谓的“包含”。

确切的语法取决于您的网络服务器支持的语言。

【讨论】：

我在服务器端使用带有 c# 编码的 web 服务，我希望我的 html 是简单的，而不使用任何 asp 标签，这是在客户端实现它的任何方式
是的，包含 XSL。我不得不说在服务器端做它可能会更好，因为你肯定知道它会包含在浏览器中。

【解决方案4】：

假设问题上的“master-pages”标签指的是 ASP.NET，这里是Super Link。附言。你也应该试试Ruby on Rails :)

【讨论】：

【解决方案5】：

使用Django。当你掌握它时，最好的东西就在那里:)

【讨论】：

【解决方案6】：

绝对我们可以避免在多个页面上编写相同的代码，例如通过只定义一个页眉和页脚内容并使用它在所有页面上。

假设您的 index.html 中有页眉和页脚元素，如下所示：

<header id='header'>
<!-- Code-->
</header>

<!---Body contents -->

<footer id='footer'>
<!-- Some code-->
</footer>

使用 JavaScript 将页眉和页脚内容存储在变量中

<script>
var header_content = '<!-- Code for header---> ;
var footer_content = '<!-- Code for footer---> ;

var header_element = document.getElementById('header');
var footer_element = document.getElementById('footer');

header_element.innerHTML = header_content;
footer_element.innerHTML = footer_content;
</script>

在您想添加页眉和页脚的页面上使用此脚本并享受 JavaScript 的强大功能。

我们的文档中的代码重复必须最少，因为它会增加冗余（实际上不需要的额外内容）/文档大小 + 其一遍又一遍地重复相同的代码真的很不专业。

我们可以更深入地讨论代码重复这个话题，其中有很多缺点（缺点）和较少的优点（优点）。

JavaScript 是最好的解决方案，因为不需要服务器端脚本，只需要客户端脚本，是的，要让它工作，你的客户端浏览器必须有 JavaScript Enabled 这是当今主流浏览器的默认设置。

【讨论】：