靜態html如何包括header和footer ?

需要寫html頁面，其中頭部導航和尾部的信息每個頁面都相同。
現在想把header和footer單獨分開。可以載入到每個頁面中，便於維護。嘗試的方法有：

1，iframe效果不好，會多出奇怪的框框
2 , jquery.load(header.html)只有火狐瀏覽器可以顯示出來
有別的什麼好用的方法嗎？除了header和footer我還想將一些模態框什麼的組件化。
只用html和jquery能實現嗎？

復用的頁面佈局, 考慮載入速度相關的性能和效果, 不要用 jQuery. 盡量服務端做組件化, 其實就是一個 HTML 字元串模板的函數. 比如樓上有人說 EJS 就可以.

通常，這是在server端做的事情，可以使用各種各樣的文件include技術，如：Server Side Includes但我看題主的意思好像是要在瀏覽器端來實現，可瀏覽器端沒有類似的技術，只能另闢蹊徑。那麼，最容易想到的辦法就是：document.write()了。

可以建立一個文件：header-footer.js內容如下

var headerHtml = [ &

chrome 還未納入標準的標籤：

&

最大的壞處是不能使用自定義參數來使引入的公共部分因不同頁面呈現不同的顯示內容（比如當前頁面在頂部欄的導航按鈕高亮）

或者使用jquary自己寫一個動態載入。

使用ejs,include指令插入公共模板

今天這個問題怎麼這麼多。。。HTML 靜態頁面的頭部和底部都是相同的，如何讓每個頁面統一調用一個公共的頭部和底部呢？ - 前端開發

今天正好碰到了這個需求，用純 js 和 html 實現的，說一下我用的方法。

1.把 header 和 footer 剝離成單獨的 html 文件。

2.在需要引入的頁面的頭部和尾部分別寫一個空 div 標籤，作為 header 和 footer 的預留位置。

3.新建一個 js 文件，封裝一個 ajax 方法，url 分別指向第一步剝離出來的的 html 文件，並將返回的內容用 innerHTML 分別填充進第二步的預留位置中。4.在相應頁面引入該 js 文件。這樣就完成了。可以很方便地引入想要的模塊，以後要維護的話直接改模塊對應的 html 文件就好了。希望對題主有幫助~o(∩_∩)o ~

復用的話，我見到的有兩種方式：

1. 伺服器端渲染：也就是後端的模板引擎，比如說php中的smarty，node中的ejs，這個的原理是在後端解析，拼字元串，最後生成完整的html，再發送到客戶端。2, 客戶端渲染：這個最常見的就是組件化，比如說angular中的指令，react中的組件，這個時候操作的是dom，動態插入或移除。當然，你說的也可以，但是輪子有些大。