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

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

在JSF中，我可以这样做:

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

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

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

当前回答

你可以用JavaScript的jQuery库来实现这一点，就像这样:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

请注意banner.html应该位于您的其他页面所在的相同域下，否则您的网页将拒绝banner.html文件，因为跨源资源共享政策。

另外，请注意，如果您使用JavaScript加载内容，谷歌将无法对其进行索引，因此对于SEO而言，这并不是一个好方法。

2015-09-19 23:13:37

其他回答

你试过iFrame注入吗?

它在文档中注入iFrame并删除自己(它应该在HTML DOM中)

问候

2019-10-11 16:07:23

PHP是一种服务器级脚本语言。它可以做很多事情，但一个流行的用途是在页面中包含HTML文档，这与SSI非常相似。与SSI一样，这是一种服务器级技术。如果你不确定你的网站上是否有PHP功能，请联系你的主机提供商。

下面是一个简单的PHP脚本，你可以使用它在任何支持PHP的网页上包含HTML片段:

将网站常用元素的HTML保存到单独的文件中。例如，导航部分可以保存为navigation.html或navigation.php。使用下面的PHP代码将该HTML包含在每个页面中。

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

在希望包含该文件的每个页面上使用相同的代码。确保将突出显示的文件名更改为包含文件的名称和路径。

2013-12-26 12:45:09

Web组件

我创建了以下类似JSF的web组件

<ui-include src="b.xhtml"><ui-include>

你可以在你的页面中使用它作为常规的html标签(在包括snippet js代码之后)

customElements.define('ui-include', class extends HTMLElement { async connectedCallback() { let src = this.getAttribute('src'); this.innerHTML = await (await fetch(src)).text();; } }) ui-include { margin: 20px } /* example CSS */ <ui-include src="https://cors-anywhere.herokuapp.com/https://example.com/index.html"></ui-include> <div>My page data... - in this snippet styles overlaps...</div> <ui-include src="https://cors-anywhere.herokuapp.com/https://www.w3.org/index.html"></ui-include>

2020-06-15 21:28:22

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

如果你使用一些框架，比如django/bootle，他们通常会提供一些模板引擎。假设您使用了bottle，默认的模板引擎是SimpleTemplate engine。下面是纯html文件

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

你可以包括页脚。TPL在你的主文件中，比如:

$ cat dashboard.tpl
%include footer

除此之外，您还可以将参数传递给dashboard .tpl。

2015-03-18 07:43:52

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

推荐文章

最新文章

标签