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

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

在JSF中，我可以这样做:

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

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

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

当前回答

目前还没有针对该任务的直接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

其他回答

这里有几种类型的答案，但我从来没有发现这里使用的最古老的工具:

“其他的答案对我都不管用。”

<html>
<head>   
    <title>pagetitle</title>
</head>

<frameset rows="*" framespacing="0" border="0" frameborder="no" frameborder="0">
    <frame name="includeName" src="yourfileinclude.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">   
</frameset>

</html>

2021-08-15 14:36:30

大多数解决方案的工作，但他们有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

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

例如:

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

2014-03-03 08:41:56

在w3.js中include是这样工作的:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

要获得正确的描述，请查看这个:https://www.w3schools.com/howto/howto_html_include.asp

2017-04-12 09:32:40

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

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

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

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

2012-01-24 15:04:53

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

推荐文章

最新文章

标签