在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()文档在这里。
我的解决方案与上面的lolo类似。 但是，我通过JavaScript的document.write插入HTML代码，而不是使用jQuery：
a.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
或者只是使用以下方便的bash脚本作为Github上的Gist发布，它可以自动完成所有必要的工作，将b.html转换为b.js ：https： b.js
感谢Greg Minshall对改进的sed命令的支持，该命令也避免了反斜杠和单引号，这是我原来的sed命令没有考虑到的。
从上面扩展lolo的答案，如果你需要包含大量的文件，这里会更自动化一些：
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
然后在html中包含一些东西：
<div data-include="header"></div>
<div data-include="footer"></div>
其中包括文件views / header.html和views / footer.html
链接地址: http://www.djcxy.com/p/39531.html