在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

其他回答

好吧，如果你只是想把一个单独文件中的文本放到你的页面中(文本中的标签也应该可以工作)，你可以这样做(你在主页上的文本样式- 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

一个非常老的解决方案满足了我当时的需求，但下面是如何做到标准兼容的代码:

<!--[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

基于https://stackoverflow.com/a/31837264/4360308的回答我用Nodejs (+ express + cheerio)实现了这个功能，如下所示:

HTML (index . HTML)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

Append ->将内容包含到div中

Replace ->替换div

您可以根据相同的设计轻松添加更多的行为

2016-08-03 21:31:33

这对我很有帮助。为了将一个html代码块从b.html添加到a.html，这应该放在a.html的head标签中:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中，一个容器用一个唯一的id和一个javascript块来加载b.html到容器中，如下所示:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

2017-02-19 22:11:21

这是我的内联解决方案:

(() => { 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文件

推荐文章

最新文章

标签