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

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

在JSF中，我可以这样做:

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

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

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

当前回答

我还有一个解

在javascript中使用Ajax

以下是Github repo中的解释代码 https://github.com/dupinder/staticHTML-Include

基本思想是:

index . html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='main.js'></script>


</head>
<body>
    <header></header>

    <footer></footer>
</body>
</html>

main.js

fetch("./header.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("header").innerHTML = data;
  });

fetch("./footer.html")
  .then(response => {
    return response.text()
  })
  .then(data => {
    document.querySelector("footer").innerHTML = data;
  });

2020-05-14 15:32:02

其他回答

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

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

好吧，如果你只是想把一个单独文件中的文本放到你的页面中(文本中的标签也应该可以工作)，你可以这样做(你在主页上的文本样式- test.html -应该仍然可以工作):

test.html

<html>
<body>
<p>Start</p>

<p>Beginning</p>

<div>
<script language="JavaScript" src="sample.js"></script>
</div>

<p>End</p>

</body>
</html>

sample.js

var data="Here is the imported text!";
document.write(data);

毕竟，您总是可以自己重新创建您想要的HTML标记。服务器端脚本只需要从另一个文件获取文本，除非您想做更多的事情。

无论如何，我开始使用这个是为了使它，所以如果我更新一个描述在许多HTML文件中，我只需要更新一个文件来做它(.js文件)，而不是每一个包含文本的HTML文件。

因此，总的来说，与其导入.html文件，更简单的解决方案是导入一个.js文件，并将.html文件的内容放在一个变量中(并将内容写入调用脚本的屏幕)。

谢谢你的问题。

2015-08-28 01:33:34

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

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

你也可以试试:

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

2013-04-14 14:27:03

这是一篇很棒的文章，你可以实现公共库，只需使用下面的代码在一行中导入任何HTML文件。

<head>
   <link rel="import" href="warnings.html">
</head>

你也可以试试谷歌聚合物

2015-06-17 17:56:08

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

推荐文章

最新文章

标签