我有2个HTML文件，假设是a.html和b.html。在a.html我想包括b.html。
在JSF中，我可以这样做：
<ui:include src="b.xhtml" />
这意味着在a.xhtml文件内部，我可以包含b.xhtml。
我们该如何*.html存档？
在HTML文件中包含另一个HTML文件
第2056篇《在HTML文件中包含另一个HTML文件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共20个回答
如果您使用诸如django / bootle之类的框架，它们通常会附带一些模板引擎。假设您使用bottle，默认模板引擎为SimpleTemplate Engine。下面是纯HTML文件
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
您可以将footer.tpl包含在主文件中，例如：
$ cat dashboard.tpl
%include footer
除此之外，您还可以将参数传递给dashborard.tpl。
PHP是服务器级脚本语言。它可以做很多事情，但是一种流行的用法是在页面内包含HTML文档，与SSI几乎相同。像SSI一样，这是服务器级技术。如果不确定网站上是否具有PHP功能，请与托管提供商联系。
这是一个简单的PHP脚本，可用于在任何启用PHP的网页上包含HTML片段：
将网站常见元素的HTML保存为单独的文件。例如，您的导航部分可能另存为navigation.html或navigation.php。使用以下PHP代码在每个页面中包含该HTML。
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
在要包含文件的每个页面上使用相同的代码。确保将高亮显示的文件名更改为包含文件的名称和路径。
要使解决方案正常工作，您需要包含文件csi.min.js，您可以在此处找到该文件。
按照GitHub上显示的示例，要使用此库，必须在页面标题中包含文件csi.js，然后需要在容器上添加data-include属性，并将其值设置为要包含的文件元件。
隐藏复制代码
<html>
<head>
<script src="csi.js"></script>
</head>
<body>
<div data-include="Test.html"></div>
</body>
</html>
... 希望能帮助到你。
这是一篇很棒的文章，您可以实现公共库，只需使用下面的代码一行即可导入任何HTML文件。
<head>
<link rel="import" href="warnings.html">
</head>
您也可以尝试使用Google Polymer
您可以使用JavaScript的库jQuery来做到这一点，如下所示：
HTML：
<div class="banner" title="banner.html"></div>
JS：
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
请注意，该页面banner.html应与其他页面位于同一域下，否则banner.html由于跨域资源共享策略，您的网页将拒绝该文件。
另外，请注意，如果您使用JavaScript加载内容，Google将无法对其进行索引，因此出于SEO的原因，这并不是一种很好的方法。
暂时没有直接HTML解决方案。即使是 HTML Imports （永久存在于草稿中）也不会执行此操作，因为Import！= Include仍然需要一些JS魔术。
我最近写 了一个VanillaJS脚本，该脚本仅用于将HTML包含到HTML中，没有任何复杂性。
只是放在你的 a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
是open-source并且可能会提出一个想法（我希望）
大多数解决方案都可以，但是jquery存在问题：
问题在于，以下代码$(document).ready(function () { alert($("#includedContent").text()); }不会警告所有内容，而是会警告所包含的内容。
我编写以下代码，在我的解决方案中，您可以访问$(document).ready函数中包含的内容：
（关键是同步加载包含的内容）。
index.htm：
<html>
<head>
<script src="jquery.js"></script>
<script>
(function ($) {
$.include = function (url) {
$.ajax({
url: url,
async: false,
success: function (result) {
document.write(result);
}
});
};
}(jQuery));
</script>
<script>
$(document).ready(function () {
alert($("#test").text());
});
</script>
</head>
<body>
<script>$.include("include.inc");</script>
</body>
</html>
include.inc：
<div id="test">
There is no issue between this solution and jquery.
</div>
要插入命名文件的内容：
<!--#include virtual="filename.htm"-->
您可以使用HTML导入的polyfill（https://www.html5rocks.com/en/tutorials/webcomponents/imports/），也可以使用简化的解决方案 https://github.com/dsheiko/html-import
例如，在页面上，您将导入HTML块，如下所示：
<link rel="html-import" href="./some-path/block.html" >
该块可能具有自己的导入：
<link rel="html-import" href="./some-other-path/other-block.html" >
导入程序将指令替换为已加载的HTML，就像SSI一样
这些指令会在您加载以下小型JavaScript时自动提供：
<script async src="./src/html-import.js"></script>
当DOM自动准备就绪时，它将处理导入。此外，它还公开了一个API，您可以使用它手动运行，获取日志等。请享用 ：）
我知道这是一个非常老的帖子，因此当时还没有某些方法。但是，这是我非常简单的看法（基于Lolo的回答）。
它依赖于HTML5 data- *属性，因此非常通用，因为它使用jQuery的for-each函数来获取每个匹配“ load-html”的.class，并使用其各自的“ data-source”属性来加载内容：
<div class="container-fluid">
<div class="load-html" id="NavigationMenu" data-source="header.html"></div>
<div class="load-html" id="MainBody" data-source="body.html"></div>
<div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
在w3.js中，包含以下内容：
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
为了获得适当的描述，请查看以下内容：https : //www.w3schools.com/howto/howto_html_include.asp
这就是帮助我的原因。b.html要向中添加html代码块a.html，应将其放入的head标记中a.html：
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
然后在body标签中，创建一个具有唯一ID和javascript块b.html的容器，以将其加载到容器中，如下所示：
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
如果需要包括某些文件中的html内容，则可以使用以下代码：例如，以下行将在对象定义发生的位置包括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
当时我确实满足了我的需要，这是一个非常老的解决方案，但是下面是实现符合标准的代码的方法：
<!--[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]-->
无需脚本。不需要在服务器端做任何花哨的东西（这可能是一个更好的选择）
<iframe src="/path/to/file.html" seamless></iframe>
由于旧的浏览器不支持无缝，因此您应该添加一些CSS来解决此问题：
iframe[seamless] {
border: none;
}
请记住，对于不支持无缝浏览器的浏览器，如果单击iframe中的链接，它将使该框架转到该URL，而不是整个窗口。解决该问题的一种方法是让所有链接都拥有target="_parent"，而浏览器的支持“足够好”。
一个简单的服务器端include指令，其中包含在同一文件夹中找到的另一个文件，如下所示：
<!--#include virtual="a.html" -->
我写的库的无耻插件解决了这个问题。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上面的内容将采用的内容/path/to/include.html并将其替换div。
通过Html5rocks教程 和Polymer-Project检出HTML5导入
例如：
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
我认为最好的解决方案是使用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>
This method is a simple and clean solution to my problem.
The jQuery .load() documentation is here.
相似问题
问题类别
您是否尝试过iFrame注入？
它将iFrame注入文档中并删除自身（应该在HTML DOM中被删除）
<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>问候