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

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

在JSF中，我可以这样做:

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

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

我们如何在*.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()文档在这里。

2012-01-25 13:17:19

其他回答

扩展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

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

例如:

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

2014-03-03 08:41:56

你试过iFrame注入吗?

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

问候

2019-10-11 16:07:23

我强烈建议AngularJS的ng-include，不管你的项目是不是AngularJS。

<script src=".../angular.min.js"></script>

<body ng-app="ngApp" ng-controller="ngCtrl">

    <div ng-include="'another.html'"></div> 

    <script>
        var app = angular.module('ngApp', []);
        app.controller('ngCtrl', function() {});
    </script>

</body>

你可以从AngularJS中找到CDN(或下载Zip)，更多信息可以从W3Schools中获取。

2020-07-11 03:26:04

你可以用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

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

推荐文章

最新文章

标签