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

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

在JSF中，我可以这样做:

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

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

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

当前回答

使用ES6反撇号' ':模板文字!

let nick = "Castor"， name = "Moon"， nuts = 1 更多。innerHTML = ' <h1>Hello ${nick} ${name}!< / h1 > 到目前为止你收集了${nuts} nuts ! <人力资源> 加倍就能得到${坚果+坚果}坚果!! ｀ < div id = "更多" > < / div >

通过这种方式，我们可以在不编码引号的情况下包含html，包括来自DOM的变量，等等。

它是一个强大的模板引擎，我们可以使用单独的js文件和使用事件来加载内容，甚至将所有内容分成块并按需调用:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

2018-11-21 21:23:09

其他回答

在我看来，最好的解决方案使用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

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

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

目前还没有针对该任务的直接HTML解决方案。即使是HTML导入(这是永久的草案)也不会做这件事，因为Import != Include和一些JS魔法无论如何都是需要的。我最近写了一个VanillaJS脚本，它只是为了将HTML包含到HTML中，没有任何复杂性。

只要放在你的。html中

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

它是开源的，可能会给你一个想法(我希望)

2015-04-29 15:14:33

如果你使用一些框架，比如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

扩展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.html和views/footer.html。

2015-08-05 15:52:48

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

推荐文章

最新文章

标签