我有2个HTML文件,假设a.html和b.html。在a.html中,我想包括b.html。
在JSF中,我可以这样做:
<ui:include src="b.xhtml" />
这意味着在.xhtml文件中,我可以包含b.xhtml。
我们如何在*.html文件中做到这一点?
我有2个HTML文件,假设a.html和b.html。在a.html中,我想包括b.html。
在JSF中,我可以这样做:
<ui:include src="b.xhtml" />
这意味着在.xhtml文件中,我可以包含b.xhtml。
我们如何在*.html文件中做到这一点?
当前回答
通过Html5rocks教程检查HTML5导入 在聚合物项目
例如:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
其他回答
我的解决方案类似于上面的lolo。但是,我通过JavaScript的文档插入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>
研究:
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://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
感谢Greg Minshall改进的sed命令,它还转义了反斜杠和单引号,这是我最初的sed命令没有考虑到的。
另外,对于支持模板字面量的浏览器,以下方法也适用:
研究:
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>
`);
作为一种替代方法,如果你可以访问服务器上的。htaccess文件,你可以添加一个简单的指令,允许php在以。html扩展名结尾的文件上被解释。
RemoveHandler .html
AddType application/x-httpd-php .php .html
现在你可以使用一个简单的php脚本来包含其他文件,比如:
<?php include('b.html'); ?>
通过Html5rocks教程检查HTML5导入 在聚合物项目
例如:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
你试过iFrame注入吗?
它在文档中注入iFrame并删除自己(它应该在HTML DOM中)
<iframe src=“header.html” onload=“this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()”></iframe>
问候
如果你使用一些框架,比如django/bootle,他们通常会提供一些模板引擎。 假设您使用了bottle,默认的模板引擎是SimpleTemplate engine。 下面是纯html文件
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
你可以包括页脚。TPL在你的主文件中,比如:
$ cat dashboard.tpl
%include footer
除此之外,您还可以将参数传递给dashboard .tpl。