Question

我试着澄清我想做什么。我有一些HTML文件，我想在其他每个HTML文件中部分呈现，例如header.html和footer.html，以便观察DRY概念。

HTML文件应如下所示：

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

我该怎么做？

Answer 1

如果您只是使用纯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');

Answer 2

Here's a link（我可能会添加的第一篇文章）解释了如何以各种语言执行此操作。

另请注意，某些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的方法   现场。这具有不需要服务器级别的优点   节目。但它比服务器级别复杂一点   包括方法。



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



使用脚本标记来包含   您网页上的JavaScript文件   ＆lt; script type =“text / javascript”src =“path to file / include-file.js”＆gt;


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

请注意 JS版本 NOT 理想。
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方法。深入考虑您是否需要来执行此操作。

Answer 3

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

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

Answer 4

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

Answer 5

正如其他人所说，仅凭HTML似乎无法完成。如果使用Java，则可以在服务器端完成此操作的另一种方法是使用Thymeleaf。

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

在HTML / JavaScript中部分呈现

5 个答案: