我有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文件中做到这一点?
当前回答
你试过iFrame注入吗?
它在文档中注入iFrame并删除自己(它应该在HTML DOM中)
<iframe src=“header.html” onload=“this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()”></iframe>
问候
其他回答
这是一篇很棒的文章,你可以实现公共库,只需使用下面的代码在一行中导入任何HTML文件。
<head>
<link rel="import" href="warnings.html">
</head>
你也可以试试谷歌聚合物
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>
... 希望能有所帮助。
好吧,如果你只是想把一个单独文件中的文本放到你的页面中(文本中的标签也应该可以工作),你可以这样做(你在主页上的文本样式- 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文件的内容放在一个变量中(并将内容写入调用脚本的屏幕)。
谢谢你的问题。
这对我很有帮助。为了将一个html代码块从b.html添加到a.html,这应该放在a.html的head标签中:
<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>