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

我正在創建一個網站，我希望能夠將外部html文件添加到另一個html文件。我有三個文件。一個是Header.html，另一個是index.html，另一個是footer.html。我希望在我爲網站創建的每個新頁面中添加頁眉和頁腳，以便更新頁眉或頁腳，並更新爲包含的所有頁面。我知道，而且在使用像PHP這樣的服務器端編程語言之前，我已經完成了這個工作，並且我已經使用了w3schools方法。兩者都在工作，但我想找到新的方式來實現HTML到另一個HTML文檔，但要支持。我想普通JS方式，或者html方式。 沒有jQuery。希望有人能幫助我。頁眉 - 頁腳包含在另一個Html文件

謝謝。

來源

2017-02-11 pro78

這個問題太寬了。已經編寫了一整類框架來處理這種頁面操作，稱爲單頁面應用程序（SPAs）。你可能只是使用其中一種流行的技術，或者採用他們所使用的技術，但這比在頁面上放置幾行JS更具挑戰性。 – Claies

謝謝@claies您的答案。我正在尋找一個沒有任何框架的解決方案。我可以使用服務器端編程語言來實現我想要的，但我想知道是否有一個html或純JavaScript的方式來做到這一點。我想將我的header.html和footer.html實現到我的所有pages.html中，並且當我對header.html或footer.html進行更新以在我的所有頁面中進行更新時，它們都包含頁眉和頁腳。 – pro78

您可能不想使用框架，但您應該考慮複製其中一種流行框架的功能，至少。他們考慮了許多你可能不知道考慮的可能情景。對於這種格式來說，甚至會刮擦如何做到這一點的任何答案都會太長。例如： – Claies

對於大型或複雜網站，這不是一個非常可維護的方法，使用ajax獲取標記文件並在頁面加載時將頁眉/ fooder容器附加到主體的頂部和底部。

對不起，這個答案是使用jQuery，雖然你可以在香草中完成所有這些步驟。

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

來源

2017-02-11 18:02:17 relic

嘗試這種方法，這對我來說工作得很好。

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

來源

2017-02-11 20:17:08

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

回答

相關問題