當網站頁面數量多達幾十上百時，制作一個頭部的html頁面和一個尾部的html頁面將會省去很多的麻煩事，比如更改頭部的樣式時，不必在每個頁面中全改一遍，方便了代碼的維護，能減輕很多的工作量。
這幾天修改公司官網的時候，被領導要求改變頭部導航中的一些內容，但是我發現如果要改內容，所有頁面的<header>內容都要改，幾百個頁面如果一個一個改太浪費時間和精力。於是我想到，之前用ASP.NET時里面有母版頁的功能，那現在可不可以通過類似的方法，實現不同子頁面鏈接同一個網頁頭部。
經過查閱各大博客網站，我發現了<iframe>元素。
標簽定義及使用說明
-
- <iframe> 標簽規定一個內聯框架。
- 一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。
例如我做了頭部文件head.html，在index.html文件中鏈接時，只需在該頁面的開頭（<body>后面）增加以下代碼：
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.html” height=“auto” width="100%"> <p>您的瀏覽器不支持 iframe 標簽。</p> </iframe>
但是當我把做好的頭部文件鏈接到首頁進行測試時，卻發現在首頁無法正常顯示頭部的導航下拉欄，研究了很久，試了網上的各種辦法都無法成功，所以我換了方法，改用js的方式鏈入。
我將head.html轉換成head.js（我用的是站長工具在線轉換格式工具），然后直接在index.html文件的開頭調用js代碼：
|
1
|
<script type=
"text/javascript"
src=
"head.js"
></script>
|
采用js調用的方法測試，首頁成功和頭部文件契合在一起，之后將所有頁面都鏈入同一個頭部文件，再次改動頭部的內容或者導航時，只需要改一個head.js文件就可以了。