我有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文件中做到这一点?
当前回答
扩展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。
其他回答
好吧,如果你只是想把一个单独文件中的文本放到你的页面中(文本中的标签也应该可以工作),你可以这样做(你在主页上的文本样式- test.html -应该仍然可以工作):
test.html
<html>
<body>
<p>Start</p>
<p>Beginning</p>
<div>
<script language="JavaScript" src="sample.js"></script>
</div>
<p>End</p>
</body>
</html>
sample.js
var data="Here is the imported text!";
document.write(data);
毕竟,您总是可以自己重新创建您想要的HTML标记。服务器端脚本只需要从另一个文件获取文本,除非您想做更多的事情。
无论如何,我开始使用这个是为了使它,所以如果我更新一个描述在许多HTML文件中,我只需要更新一个文件来做它(.js文件),而不是每一个包含文本的HTML文件。
因此,总的来说,与其导入.html文件,更简单的解决方案是导入一个.js文件,并将.html文件的内容放在一个变量中(并将内容写入调用脚本的屏幕)。
谢谢你的问题。
使用jquery你需要导入库
我建议您使用PHP
<?php
echo"<html>
<body>";
?>
<?php
include "b.html";
?>
<?php
echo" </body>
</html>";
?>
b.html
<div>hi this is ur file :3<div>
你试过iFrame注入吗?
它在文档中注入iFrame并删除自己(它应该在HTML DOM中)
<iframe src=“header.html” onload=“this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()”></iframe>
问候
使用includeHTML(最小js-lib:约150行)
通过HTML标签加载HTML部件(纯js) 支持加载:异步/同步,任何深度递归包括
支持的协议:http://, https://,文件:/// 支持的浏览器:IE 9+, FF, Chrome(也可能是其他)
用法:
1.在HTML文件中插入includeHTML到头部部分(或在正文结束标记之前):
<script src="js/includeHTML.js"></script>
2.在任何地方使用includeHTML作为HTML标签:
<div data-src="header.html"></div>
如果你使用一些框架,比如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。