我有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文件中做到这一点?
当前回答
PHP是一种服务器级脚本语言。它可以做很多事情,但一个流行的用途是在页面中包含HTML文档,这与SSI非常相似。与SSI一样,这是一种服务器级技术。如果你不确定你的网站上是否有PHP功能,请联系你的主机提供商。
下面是一个简单的PHP脚本,你可以使用它在任何支持PHP的网页上包含HTML片段:
将网站常用元素的HTML保存到单独的文件中。例如,导航部分可以保存为navigation.html或navigation.php。 使用下面的PHP代码将该HTML包含在每个页面中。
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
在希望包含该文件的每个页面上使用相同的代码。 确保将突出显示的文件名更改为包含文件的名称和路径。
其他回答
作为一种替代方法,如果你可以访问服务器上的。htaccess文件,你可以添加一个简单的指令,允许php在以。html扩展名结尾的文件上被解释。
RemoveHandler .html
AddType application/x-httpd-php .php .html
现在你可以使用一个简单的php脚本来包含其他文件,比如:
<?php include('b.html'); ?>
您可以使用HTML Imports的填充(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)或简化的解决方案 https://github.com/dsheiko/html-import
例如,在你导入HTML块的页面上:
<link rel="html-import" href="./some-path/block.html" >
该块可以有自己的导入:
<link rel="html-import" href="./some-other-path/other-block.html" >
导入器用加载的HTML替换指令,就像SSI一样
这些指令将在你加载这个小JavaScript时自动提供:
<script async src="./src/html-import.js"></script>
它将在DOM准备就绪时自动处理导入。此外,它还公开了一个API,您可以使用该API手动运行、获取日志等等。享受:)
另一种方法是使用Fetch API和Promise
<html>
<body>
<div class="root" data-content="partial.html">
<script>
const root = document.querySelector('.root')
const link = root.dataset.content;
fetch(link)
.then(function (response) {
return response.text();
})
.then(function (html) {
root.innerHTML = html;
});
</script>
</body>
</html>
以下工作,如果html内容从一些文件需要包括: 例如,下面一行将在OBJECT定义出现的位置包含piece_to_include.html的内容。
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
参考:http://www.w3.org/TR/WD-html40-970708/struct/includes.html # h-7.7.4
使用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>