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

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

在JSF中，我可以这样做:

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

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

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

当前回答

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

例如:

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

2014-03-03 08:41:56

其他回答

我强烈建议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

我的解决方案类似于上面的lolo。但是，我通过JavaScript的文档插入HTML代码。编写而不是使用jQuery:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

研究:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

我反对使用jQuery的原因是jQuery.js的大小约为90kb，我想保持加载的数据量尽可能小。

为了得到正确转义的JavaScript文件，你可以使用下面的sed命令:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

或者只是使用以下方便的bash脚本作为Github上的Gist发布，它自动完成所有必要的工作，将b.html转换为b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

感谢Greg Minshall改进的sed命令，它还转义了反斜杠和单引号，这是我最初的sed命令没有考虑到的。

另外，对于支持模板字面量的浏览器，以下方法也适用:

研究:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

2013-03-06 14:40:12

下面是我使用Fetch API和async函数的方法

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

2019-01-08 13:17:55

你试过iFrame注入吗?

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

问候

2019-10-11 16:07:23

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

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

推荐文章

最新文章

标签