我有2个HTML文件,假设a.html和b.html。在a.html中,我想包括b.html。

在JSF中,我可以这样做:

<ui:include src="b.xhtml" />

这意味着在.xhtml文件中,我可以包含b.xhtml。

我们如何在*.html文件中做到这一点?


当前回答

一个非常老的解决方案满足了我当时的需求,但下面是如何做到标准兼容的代码:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

其他回答

通过Html5rocks教程检查HTML5导入 在聚合物项目

例如:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

您可以使用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手动运行、获取日志等等。享受:)

Web组件

我创建了以下类似JSF的web组件

<ui-include src="b.xhtml"><ui-include>

你可以在你的页面中使用它作为常规的html标签(在包括snippet js代码之后)

customElements.define('ui-include', class extends HTMLElement { async connectedCallback() { let src = this.getAttribute('src'); this.innerHTML = await (await fetch(src)).text();; } }) ui-include { margin: 20px } /* example CSS */ <ui-include src="https://cors-anywhere.herokuapp.com/https://example.com/index.html"></ui-include> <div>My page data... - in this snippet styles overlaps...</div> <ui-include src="https://cors-anywhere.herokuapp.com/https://www.w3.org/index.html"></ui-include>

要让解决方案工作,您需要包括文件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>

... 希望能有所帮助。

作为一种替代方法,如果你可以访问服务器上的。htaccess文件,你可以添加一个简单的指令,允许php在以。html扩展名结尾的文件上被解释。

RemoveHandler .html
AddType application/x-httpd-php .php .html

现在你可以使用一个简单的php脚本来包含其他文件,比如:

<?php include('b.html'); ?>