我有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而言,这并不是一个好方法。

其他回答

不需要脚本。不需要做任何花哨的东西服务器端(尽管这可能是一个更好的选择)

<iframe src="/path/to/file.html" seamless></iframe>

由于旧的浏览器不支持无缝,你应该添加一些css来修复它:

iframe[seamless] {
    border: none;
}

请记住,对于不支持无缝链接的浏览器,如果您单击iframe中的链接,它将使框架指向该url,而不是整个窗口。一种解决方法是让所有链接都有target="_parent",尽管浏览器的支持是“足够好”。

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

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

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

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

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

这对我很有帮助。为了将一个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>

通过Html5rocks教程检查HTML5导入 在聚合物项目

例如:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>