【发布时间】：2012-01-14 03:01:24
【问题描述】：
最好的方法是什么 - 跨浏览器兼容以在 HTML5 中包含 HTML 文件。
我正在用 HTML5 构建一个网站，并希望将导航放在一个单独的文件中并包含在网站页面中。
【问题讨论】：
标签： html
【发布时间】：2012-01-14 03:01:24
【问题描述】：
对于 HTML5 你可以试试：
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)
如果此功能未在目标浏览器中实现，您可以使用 webcomponents polyfill：http://webcomponents.org/polyfills/
【讨论】：
-
客户端已弃用。但不一定是服务器端。仍在寻找服务器将其编译成一页（模板）。和 polyfill 用于直接在浏览器中打开它（开发）。未来，我看到服务器正在握手，是提供部分 html 文件还是将它们编译到一个站点中。
使用object 标签：
<object name="foo" type="text/html" data="foo.inc"></object>
foo.inc 应该包含有效的 HTML。
注意：不要使用自动关闭的<object/> 样式。这将阻止显示标记后的内容。
【讨论】：
-
太棒了，谢谢！适用于 Konqueror、Firefox、Chromium。还想要什么？ :-)
-
这与 iframe 行为没有什么不同
-
正如@edom 所说，W3C validator 不喜欢它，并且“包含”之后的内容没有显示（在 Chrome 中，我没有测试其他浏览器）。 W3C 反对自闭标签。我将其替换为结尾
</object>并对其进行了验证并显示了以下内容。 -
我刚刚尝试过，但没有成功。相反，Chrome 在加载页面后立即下载了 foo.inc。 WTF？？？
-
虽然“酷”，但这不是一个好的解决方案。 HTML 不是预处理器语言。对象不是为此而设计的，并且不能保证这种行为。
好的，这些都是有效的答案，但除了 javascript 方法之外，其他方法非常有限。
php 严格绑定到提供程序。
object 和 embed 包含没有任何样式的代码（除非您在包含的文件中声明它）。
所以我的意思是这还不够好，因为 php 或 asp 包含 可以正常工作，但需要一个支持它的服务器。
【讨论】：
正确的方法是使用服务器端包含。 PHP 解决方案要求安装 PHP 仅用于包含文件，规范不支持 html 解决方案，即使它们可以工作（规范不区分 mime 类型，但它确实指定了它的意图，这意味着它可以显式如果这些标签没有被完全弃用，将来会被阻止）。
这是我在类似帖子中询问相同问题的帖子：
如果您的服务器支持 SSI（包括服务器端），您可以将以下内容放入您的 html 文件中，而无需脚本语言或其他任何东西。 Apache 默认启用 SSI（我认为？）
<!--#include file="same_path_file.html" -->
<!--#include virtual="docroot_file.html" -->
“文件”是相对于当前文件的，可能您会使用它来包含“relevant_article_poll.html”等相关文件。
“虚拟”相对于文档根目录（即您的网站根目录），您可以使用它来包含全局文件，例如页眉和页脚。
你选择哪一个并不重要，但了解两者之间的区别很有用。
此外，include 指令为每个文件向服务器发出一个新的内部 http 请求，因此您可以包含 php 文件等，它们将按应有的方式执行。
以下是 SSI 的有用概述：http://en.wikipedia.org/wiki/Server_Side_Includes
【讨论】：
-
只是对旧答案的简短说明，说
nginx也可以配置为支持 SSI - 通常只使用单行ssi on;?（但当然你可以使用该命令在更复杂的环境中）。
我不知道在 HTML 中执行此操作的任何方式，但如果您要在 PHP 中执行此操作，则很简单，如果您希望在您刚刚放置的每个页面中包含某个导航栏：
<?php include('nav.php') ?>
将 HTML 代码放在单独的导航页面中，PHP 每次都会自动将其放入其中。而且你不需要了解 PHP 就可以制作 PHP 页面本身，你可以在 PHP 文件中使用一般的 HTML 标记，它就可以正常工作。
【讨论】：
-
超级好用，除了百万零一项目不能用PHP。
-
整个问题的荒谬性——没有用于包含 html 的内置功能怎么强调都不过分。几十年来，除了 HTML 之外，我还没有使用过没有预处理器指令来包含文件的语言。
<object> 工作正常，虽然它不是一个自闭合标签，所以它应该看起来像这样（否则它不是有效的 HTML5）：
<object name="foo" type="text/html" data="foo.inc"></object>
<embed> 也可用于包含外部 html 内容（以及任何 MIME 类型）：
<embed type="text/html" src="foo.inc">
【讨论】：
-
+1 您应该获得答案（对问题的 19 票赞成，没有获得答案？！）。 HTML 5 中需要结束标记 是，否则不会显示以下任何内容（在 Chrome 中，我没有测试其他内容）
-
同样错误，根据 html5 规范。虽然它“有效”（规范不区分 mime 类型），但 embed 并不适用于此。它的预期用途是用于非 html 元素，例如插件元素。
-
对于我来说，对于
HTML5 由 3 个组件组成：HTML、CSS 和 JavaScript。所以我们必须使用所有这些来利用 HTML5。
外部 HTML 代码可以使用 javascript 包含在另一个 html 文档中。唯一的事情是，您必须将外部代码存储在 .js 文件中。这是一个如何包含 html 段落的示例：
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="include_html.js"></script>
</head>
<body>
<script type="text/javascript">
paragraph();
</script>
</body>
</html>
include_html.js 的内容
function paragraph()
{
document.write("<p> This is an HTML paragraph </p>");
}
【讨论】：
-
不，HTML5 由 1 个组件组成：HTML5。它本身就是一个标准。
-
不要尝试这样会误导。
如果您正在编写纯 HTML，则无法包含文件。但是，您可以使用 Apache 的服务器端包含 (SSI) 功能，也可以使用一些脚本语言（Python、Ruby、PHP 等）来组装页面。
【讨论】：
-
+1 ...浏览器兼容性不是一个因素。 （至于包含；如果您的 HTML 本身不好，那是另一回事。）
-
Javascript 也是一种选择。位于 SSI 和服务器端脚本语言之间。如果 Javascript 被禁用，那么如果是导航，则会出现很大的问题。
-
+1 这应该是正确的答案。它很容易实现，适用于所有浏览器，并且具有悠久的稳定性历史。