在HTML文件中包含另一个HTML文件

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

在JSF中，我可以这样做:

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

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

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

当前回答

不需要脚本。不需要做任何花哨的东西服务器端(尽管这可能是一个更好的选择)

<iframe src="/path/to/file.html" seamless></iframe>

由于旧的浏览器不支持无缝，你应该添加一些css来修复它:

iframe[seamless] {
    border: none;
}

请记住，对于不支持无缝链接的浏览器，如果您单击iframe中的链接，它将使框架指向该url，而不是整个窗口。一种解决方法是让所有链接都有target="_parent"，尽管浏览器的支持是“足够好”。

2013-11-27 00:52:02

其他回答

使用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>

2021-01-12 20:13:52

一个简单的服务器端包含指令，包括在同一文件夹中找到的另一个文件，如下所示:

<!--#include virtual="a.html" -->

你也可以试试:

<!--#include file="a.html" -->

2013-04-14 14:27:03

我的解决方案类似于上面的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>

`);

2013-03-06 14:40:12

不需要脚本。不需要做任何花哨的东西服务器端(尽管这可能是一个更好的选择)

<iframe src="/path/to/file.html" seamless></iframe>

由于旧的浏览器不支持无缝，你应该添加一些css来修复它:

iframe[seamless] {
    border: none;
}

2013-11-27 00:52:02

如果你使用一些框架，比如django/bootle，他们通常会提供一些模板引擎。假设您使用了bottle，默认的模板引擎是SimpleTemplate engine。下面是纯html文件

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

你可以包括页脚。TPL在你的主文件中，比如:

$ cat dashboard.tpl
%include footer

除此之外，您还可以将参数传递给dashboard .tpl。

2015-03-18 07:43:52

在HTML文件中包含另一个HTML文件

推荐文章

最新文章

标签