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

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

在JSF中，我可以这样做:

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

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

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

当前回答

另一种方法是使用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>

2019-03-25 03:37:01

其他回答

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

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

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

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

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

2012-01-24 15:04:53

在w3.js中include是这样工作的:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

要获得正确的描述，请查看这个:https://www.w3schools.com/howto/howto_html_include.asp

2017-04-12 09:32:40

在我看来，最好的解决方案使用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()文档在这里。

2012-01-25 13:17:19

这是我的内联解决方案:

(() => { const includes = document.getElementsByTagName('include'); [] .forEach。调用(包含I => { let filePath = i.getAttribute('src'); fetch (filePath)。然后(file => { file.text()。然后(content => { i.insertAdjacentHTML(“afterend”、内容); i.remove (); })； })； })； }) (); FOO <包括src = " a.html " >加载…< /包括> 酒吧 <包括src = " b.html " >加载…< /包括> t

2019-12-09 13:12:51

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

推荐文章

最新文章

标签