在 HTML 文件中包含另一个 HTML 文件
我有 2 个 HTML 文件，假设 a.html 和 b.html。在 a.html 中，我想包含 b.html。
在 JSF 中，我可以这样做：
<ui:include src="b.xhtml" />
这意味着在 a.xhtml 文件中，我可以包含 b.xhtml。
我们如何在 *.html 文件中做到这一点？
在我看来，最好的解决方案是使用 jQuery：
a.html：
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html：
<p>This is my include file</p>
这种方法是解决我的问题的简单而干净的方法。
jQuery .load() 文档是 here。
展开 lolo's answer，如果您必须包含大量文件，这里会更加自动化。使用这个 JS 代码：
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
然后在 html 中包含一些内容：
<div data-include="header"></div>
<div data-include="footer"></div>
其中将包括文件 views/header.html 和 views/footer.html。
data-argument 并在包含的文件中检索它？
$("#postdiv").load('posts.php?name=Test&age=25');
我的解决方案类似于上面的 lolo 之一。但是，我通过 JavaScript 的 document.write 插入 HTML 代码，而不是使用 jQuery：
一个.html：
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js：
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
我反对使用 jQuery 的原因是 jQuery.js 的大小约为 90kb，我希望加载的数据量尽可能小。
为了不费力地获得正确转义的 JavaScript 文件，您可以使用以下 sed 命令：
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
或者只是使用以下作为 Gist 在 Github 上发布的便捷 bash 脚本，它可以自动完成所有必要的工作，将 b.html 转换为 b.js：https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
归功于 Greg Minshall 改进的 sed 命令，它还转义了反斜杠和单引号，我原来的 sed 命令没有考虑这些。
或者，对于支持 template literals 的浏览器，以下内容也适用：
b.js：
document.write(`
<h1>Add your HTML code here</h1>
<p>Notice, you do not have to escape LF's with a '\',
like demonstrated in the above code listing.
</p>
`);
' 标记的任何 HTML。如果您只是执行查找/替换以替换 ` with \` 那么查找/替换以将 ' 替换为 \' 并将新行替换为 ``new-lines 它将正常工作。
签出 HTML5 导入 via Html5rocks tutorial 和 polymer-project
例如：
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
stuff.html 在父页面中作为模板可用，但您必须使用脚本在父页面中创建其 DOM 的克隆页面，以便它们对用户可见。
我写的一个库的无耻插件解决了这个问题。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
以上将采用 /path/to/include.html 的内容并将 div 替换为它。
<div data-include="/path/to/include.html"></div> 的任何位置再次包含它。该工具使以干净的方式制作简单的无插件多页模型变得更加容易。
不需要脚本。无需在服务器端做任何花哨的事情（那可能是更好的选择）
<iframe src="/path/to/file.html" seamless></iframe>
由于旧浏览器不支持无缝，您应该添加一些 css 来修复它：
iframe[seamless] {
border: none;
}
请记住，对于不支持无缝的浏览器，如果您单击 iframe 中的链接，它将使 frame 转到该 url，而不是整个窗口。一种解决方法是让所有链接都有 target="_parent"，但浏览器支持“足够好”。
seamless 属性 来自它所来自的 HTML 草稿中的 removed。不要使用它。
一个简单的服务器端包含指令包含在同一文件夹中找到的另一个文件，如下所示：
<!--#include virtual="a.html" -->
您也可以尝试：
<!--#include file="a.html" -->
<!--#include file="a.html" -->
<handlers> 部分中的 } 文件
very old solution 我当时确实满足了我的需求，但以下是符合标准的代码：
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
<object>、<embed> 和 <iframe> 都适用于此，但在所有三种情况下，它们都使用自己的样式和脚本上下文创建单独的文档（iframe 特别包括丑陋的边框和滚动条），例如任何链接默认情况下在它们中而不是在父页面上打开（尽管这可以用 target="_parent" 覆盖）。在所有这些中，iframe 是唯一有希望通过 HTML5 seamless 属性（bjb568 提到）变得更加集成的框架，但它还没有得到很好的支持：caniuse.com/#feat=iframe-seamless
seamless 属性）是唯一过时的部分——其余部分仍然适用。
如果需要包含来自某个文件的 html 内容，则以下工作：例如，以下行将在 OBJECT 定义发生的位置包含piece_to_include.html 的内容。
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
参考：http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
$(function(){})只会在文档加载完成后执行。XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.