Question

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

感谢。

Answer 1

尝试这种方法，这对我来说很好。

你的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();
  });

Answer 2

对于大型或复杂的站点，这不是一个非常易于维护的方法，使用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'));
        });
    }
});

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

2 个答案: