22

header.html我有一些 HTML 文件，我想将它们中的每一个部分呈现在另一个 HTML 文件中，例如footer.html为了观察 DRY 概念。

HTML 文件应如下所示：

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

我怎样才能做到这一点？

4

5 回答 5

27

如果您只是使用纯 HTML 和 Javascript，您可以包含 jQuery 并使用 AJAX 请求在您的主页中加载另一个 HTML 页面的内容。

看看这里的 jQuery 'load()' 函数：

http://api.jquery.com/load/

假设您有以下html：

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

你的用法看起来像这样：

$('#header').load('header.html');
$('#footer').load('footer.html');
于 2012-07-22T07:46:47.207 回答
22

这是一个链接（我可能会添加来自 Google 的第一个链接），它解释了如何以各种语言执行此操作。

另请注意，某些 IDE 会为您处理此问题。Dreamweaver 就是一个例子；在 ASP.NET 中有母版页；等等。

PHP：

<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>

ASP：

<!--#include file="path to file/include-file.html"-->

JS：

JavaScript 是在您的网站页面中包含 HTML 的另一种方式。这具有不需要服务器级编程的优点。但它比服务器级别的包含方法要复杂一些。

  1. 将站点常见元素的 HTML 保存到 JavaScript 文件中。在此文件中写入的任何 HTML 都必须使用 document.write 函数打印到屏幕上。

  2. 使用脚本标记将 JavaScript 文件包含在您的页面上。
    <script type="text/javascript" src="文件路径/include-file.js">

  3. 在要包含该文件的每个页面上使用相同的代码。

请注意，JS 版本并不理想。
1. JS 可能在浏览器中被禁用或不可用。
2. 页面不会一次全部渲染/加载。

另外，我不认为 DRY 真的很重要。考虑使用将为您创建页面模板的 IDE（例如 Dreamweaver）。

如果您足够勇敢（并且有点过时）并且无法使用上述任何方法，请考虑为您的内容使用 iframe：

<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>

免责声明
我宁愿砍掉自己的双手，也不愿实现 iframe 或 JS 方法。深入考虑您是否真的需要这样做。

于 2012-07-22T07:43:23.747 回答
5

如果您正在寻找仅是 html/js 的客户端解决方案，您应该查看 AngularJS 及其ngInclude语法。

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

于 2012-07-22T07:48:41.343 回答
3

如果您正在使用服务器端编程，则可以使用服务器端包含，否则如果您的主机文件是 HTML 文件，则可以使用 html SCRIPT 标签来包含 header.html 和 footer.html 文件。不过，我不确定部分呈现 HTML 文件的真正含义是什么？

于 2012-07-22T07:44:06.563 回答
0

正如其他人所说，它似乎无法单独使用 HTML 完成。如果您使用 Java，可以在服务器端完成的另一种方法是使用 Thymeleaf。

例如，在每个页面上添加一个主菜单，使用 <div th:replace="fragments/mainmenu.html"></div>. 那么 mainmenu.html 可能只包含一堆 div。片段不需要是完整的 HTML 页面。

于 2020-09-12T00:24:33.580 回答