Question

最佳方式是什么 - 跨浏览器兼容以在HTML5中包含HTML文件。

我正在使用HTML5构建网站，并希望将导航放在一个单独的文件中并包含在网站页面中。

Answer 1

使用object标记：

<object name="foo" type="text/html" data="foo.inc"></object>

foo.inc应该包含有效的HTML。

注意：请勿使用自动关闭<object/>样式。这将阻止标签显示后的内容。

Answer 2

<object>工作正常，虽然它不是一个自动关闭的标签，所以看起来应该是这样（否则它不是HTML5）：

<object name="foo" type="text/html" data="foo.inc"></object>

<embed>也可用于包含外部html内容（以及任何MIME类型）：

<embed type="text/html" src="foo.inc">

Answer 3

对于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/

Answer 4

如果您正在编写纯HTML，则无法包含文件。但是，您可以使用Apache的服务器端包含（SSI）功能，或者您可以使用某些脚本语言（Python，Ruby，PHP等）来组合页面。

Answer 5

好的，这些都是有效的答案，但除 javascript 方法外，其他方法都非常有限。

php 一个严格绑定到提供者。
相反，对象和嵌入包含没有任何样式的代码（除非您在包含的文件中声明它）。

所以我的意思是，这不是很好，因为 php或asp include 工作正常，但需要一台支持它的服务器。

Answer 6

正确的方法是使用服务器端包含。 PHP解决方案要求安装PHP只是为了包含文件，即使它们有效，规范也不支持html解决方案（规范并没有区分mime类型，但它确实指明了它的意图，这意味着它可以如果这些标签不完全弃用，将来要明确禁止。

这是我在类似帖子中发帖询问同样的事情：

如果您的服务器支持SSI（服务器端包含），您可以将以下内容放在html文件中，而无需脚本语言或其他任何内容。 Apache默认启用了SSI（我认为？）

<!--#include file="same_path_file.html" -->
<!--#include virtual="docroot_file.html" -->

＆＃34;文件＆＃34;是相对于当前文件，可能用于包括相关文件，如＆＃34; related_article_poll.html＆＃34;。

＆＃34;虚拟＆＃34;是相对于文档根目录（即您的网站根目录），您可以使用它来包含全局文件，如页眉和页脚。

您选择哪一个并不重要，但了解两者之间的区别非常有用。

此外，include指令为每个文件向服务器发出一个新的内部http请求，因此您可以包含php文件等等，它们将按原样执行。

以下是SSI的有用概述：http://en.wikipedia.org/wiki/Server_Side_Includes

Answer 7

我不知道用HTML做任何方法，但是如果你是用PHP做的话，这很简单，如果你想要的某个导航栏包含在你刚刚放入的每个页面中：

<?php include('nav.php') ?>

将HTML代码放在导航的单独页面中，PHP每次都会自动将其关在那里。而且您不必知道PHP本身就可以创建PHP页面，您可以在PHP文件中使用通用HTML标记，它可以正常工作。

Answer 8

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包含文件

8 个答案: