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

我有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]-->

2013-04-19 16:04:33

其他回答

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

．.．希望能有所帮助。

2019-08-06 06:50:12

以下工作，如果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

2014-05-20 07:11:27

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

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

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

iframe[seamless] {
    border: none;
}

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

2013-11-27 00:52:02

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

扩展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。

2015-08-05 15:52:48

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

推荐文章

最新文章

标签