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

javascript dom html include

2022-08-29 22:29:36

我有2个HTML文件，假设和.在我想包括.a.htmlb.htmla.htmlb.html

在JSF中，我可以这样做：

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

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

我们如何在文件中执行此操作？*.html

答案 1

在我看来，最好的解决方案是使用jQuery：

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

这种方法是解决我的问题的简单而干净的方法。

jQuery 文档在这里。.load()

答案 2

扩展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.htmlviews/footer.html