页眉 - 页脚包含在另一个 Html 文件中答案

【问题标题】：Header - Footer Include in another Html file页眉 - 页脚包含在另一个 Html 文件中
【发布时间】：2017-02-11 16:58:43
【问题描述】：

我正在创建一个网站，我希望能够将外部 html 文件添加到另一个 html 文件中。我有三个文件。一个是Header.html，一个是index.html，另一个是footer.html。我想要在我为我的网站创建的每个新页面中添加页眉和页脚，以便我可以更新页眉或页脚并更新到包含的所有页面。我知道，而且我在使用像 PHP 这样的服务器端编程语言之前已经这样做了，并且我使用了 w3schools 方法。两者都在工作，但我想找到将 html 实现到另一个 html 文档的新方法，但要得到支持。我想要plain JS方式，或者html方式。 没有 jQuery。希望有高手可以帮助我。

谢谢。

【问题讨论】：

这太宽泛了。已经编写了一整类框架来处理这种页面操作，称为单页面应用程序 (SPA)。您可能只使用许多流行的方法之一，或者采用他们采用的一些技术，但这比在页面上放置几行 JS 更具挑战性。
感谢@claies 的回答。我正在寻找没有任何框架的解决方案。我可以使用服务器端编程语言来实现我想要的，但我想知道是否有 html 或纯 JavaScript 方式来做到这一点。我想在我的所有 pages.html 中实现我的 header.html 和 footer.html，并且当我对 header.html 或 footer.html 进行更新以在我的所有页面中更新它们包括页眉和页脚时。
好吧，您可能不想使用框架，但您至少应该考虑复制其中一个流行框架的功能。他们考虑了许多您甚至可能不知道要考虑的可能情况。对于这种格式，任何甚至会触及如何做到这一点的表面的答案都太长了。
例如：通常，这是一个 AJAX XMLHttpRequest 来获取额外的文件，读取它们，然后用它们的内容替换文件所在的 DOM 部分。如果操作不当，这可能会导致您的用户在此加载期间看到空白区域或占位符文本。大多数 SPA 框架都有一些方法来控制这种“闪烁”或“占位”。

标签： javascript html

【解决方案1】：

对于大型或复杂的网站，这不是一个非常易于维护的方法，使用 ajax 获取标记文件，并在页面加载时将 header/fooder 容器附加到正文的顶部和底部。

抱歉，这个答案使用的是 jQuery，尽管您可以在 vanilla 中完成所有这些步骤。

$.ajax({
    url: "/path/to/markup",
    dataType: "html",
    success: function(html) {
        $(document).ready(function() {
            $('body').prepend($(html).find('#header'));
            $('body').append($(html).find('#footer'));
        });
    }
});

【讨论】：

【解决方案2】：

试试这个方法，对我来说效果很好。

你的 html 代码..

<div id="header"></div>

<!--your body -->

<div id="footer"></div>

你的 JavaScript 代码

function include_header() {
document.getElementById("header").innerHTML='<object type="text/html" data="header.html" ></object>';
}
function include_footer() {
document.getElementById("footer").innerHTML='<object type="text/html" data="footer.html" ></object>';
}

在 DOM 加载后调用这些函数。像这样的。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("call your functions here");
      include_header();
     include_footer();
  });

【讨论】：