頁眉-頁腳包含在另一個HTML文件中

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提取標記文件，並在頁面加載時將標頭/食物容器附加到正文的頂部和底部。

預先抱歉，這個答案使用的是jQuery，盡管您可以在香草中完成所有這些步驟。

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