在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

其他回答

插入指定文件的内容。

<!--#include virtual="filename.htm"-->

2013-08-18 05:36:08

以下工作，如果html内容从一些文件需要包括: 例如，下面一行将在OBJECT定义出现的位置包含piece_to_include.html的内容。

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

参考:http://www.w3.org/TR/WD-html40-970708/struct/includes.html # h-7.7.4

2014-05-20 07:11:27

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

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

大多数解决方案的工作，但他们有jquery的问题:

问题出现在代码$(document)下面。ready(function () {alert($("#includedContent").text());}不提示任何内容，而不是提示包含的内容。

我写下面的代码，在我的解决方案中，你可以访问包含在$(文档)的内容。现成的函数:

(关键是同步加载所包含的内容)。

你可以:

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc:

<div id="test">
    There is no issue between this solution and jquery.
</div>

Jquery包含在github插件

2014-06-13 15:23:18

一个简单的服务器端包含指令，包括在同一文件夹中找到的另一个文件，如下所示:

<!--#include virtual="a.html" -->

你也可以试试:

<!--#include file="a.html" -->

2013-04-14 14:27:03

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

推荐文章

最新文章

标签