我有 2 个 HTML 文件，假设a.html和b.html. 在a.html我想包括b.html.
在 JSF 中，我可以这样做：
<ui:include src="b.xhtml" />
这意味着在a.xhtml文件内部，我可以包含b.xhtml.
我们如何在*.html文件中做到这一点？
在 HTML 文件中包含另一个 HTML 文件
IT技术
javascript
html
dom
include
2020-12-17 16:31:18
6个回答
在我看来，最好的解决方案是使用 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()文档在这里。
从上面扩展 lolo 的答案，如果您必须包含大量文件，这里有更多的自动化。使用这个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.
我的解决方案类似于上面的lolo之一。但是，我通过 JavaScript 的 document.write 而不是使用 jQuery 插入 HTML 代码：
一个.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
或者只使用以下在 Github 上作为 Gist 发布的方便的 bash 脚本，自动执行所有必要的工作，转换b.html为b.js：https :
//gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
感谢Greg Minshall改进了 sed 命令，该命令还可以转义反斜杠和单引号，而我原来的 sed 命令没有考虑到这些。
或者，对于支持模板文字的浏览器，以下也适用：
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>
`);
通过 Html5rocks 教程 和聚合物项目检查 HTML5 导入
例如：
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
我写的一个库的无耻插件解决了这个问题。
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
上面的内容将/path/to/include.html取而代之div。
其它你可能感兴趣的问题