公所周知，大部分的pc項目中有很多個頁面，而每個頁面幾乎都有重復的部分，今天分享得是如何將這些公共布局樣式封裝起來，在其他的頁面中直接調用。這只是其中的一種，也是我從網上找到的。這篇文章是轉載的。
文章原出處：https://blog.csdn.net/qq_35393869/article/details/79803190。
如何實現多個.html靜態頁，引用同一個header.html和footer.html文件？
直接上代碼：
當前方法：通過load()函數，引入公共頭部和尾部文件; 代碼預覽： $(".headerpage").load("header.html"); $(".footerpage").load("footer.html");
首先，先看一下代碼與界面的划分，效果示意圖如下：
然后，看一下head.html文件，全部代碼示下：
<!-- 頁眉 共通 --> <div class="header"> <div class="htmargin"> <div class="fl"> <i class="htphone"></i> <span class="htfont">咨詢電話：</span> <i class="telphone">0123-123456</i> <span class="htfont"> （工作日9:00-17:30）</span> <span class="headerwx"><a class="htheader htwx"></a> <div class="htwx"> <div class="httext"> <span>掃碼關注官方公眾號</span> <i></i> </div> </div></span> <span class="headerwb"><a class="htheader htwb"></a> <div class="htwb"> <div class="httext"> <span>在線咨詢QQ客服</span> <div class="htwb-link"> <a href="" class="htwb-link-font">@在線客服</a> </div> </div> </div><i></i></span> </div> <div class="fr item-list"> <ul class="htul"> <li class="htli" id="loginOut" style="display:none"><a onclick="javascript:doLogout();" class="httitle">退出</a></li> <!--用戶名--> <li class="htli" id="htName-li" style="display:none"><a href="#" class="httitle " id="htName"></a></li> <!--<li class="htli" id="htRegister"><a href="register.html" class="httitle loginout">注冊</a></li>--> <li class="htli" id="htLogin"><a href="#" class="httitle">登錄</a></li> <li class="htli"><a href="" class="httitle">關於我們</a></li> <li class="htli"><a href="" class="httitle">幫助中心</a></li> <li style="height: 36px;float: right;text-align: center;"><span class="httitle-top-txt">推薦有驚喜 好禮拿不停</span></li> </ul> </div> </div> </div> <div class="jpt-nav"> <input type="hidden" id="top_login" /> <div class="htmargin"> <div class="nav fl"> <a href="" style="overflow:hidden;display:block;"><i class="logo"></i><!--<i class="jpt-logo-right"></i>--></a> </div> <div class="nav-wrap fr" style="position:relative"> <ul class="group" id="example-one"> <li class="index"><a href="">首頁</a></li> <li class="product"><a href="">全部商品</a></li> <li style="float:right;" class="self"><a style="cursor:pointer;" href="">我的賬戶</a></li> <li class="mae" id="mae" style="width: 86px; left: 0px;"></li> </ul> </div> </div> </div> <!-- 頁眉 共通 --> <script src="js/public_share_code.js"></script>
其次，看一下footer.html文件，全部代碼示下：
<!-- S 頁腳共通 --> <div class="btmpage" style="margin-top: 48px;"> <div class="div-btm "> <div class="pro-tolo"> <div class="div-btm-left"> <a href="" target="_blank" class="btm">關於我們</a> <a href="" target="_blank" class="btm">全部商品</a> <a href="" target="_blank" class="btm">幫助中心</a> <a href="" target="_blank" class="btm">加入我們</a> <a href="" target="_blank" class="btm">聯系我們</a> <a href="" target="_blank" class="btm">意見反饋</a> <span class="divpc-contact">中國北京市 聯系方式 <br />電話：+86-0551-65522006 郵箱：123456@123.mail<br />地址：中國北京新城區XX寫字樓1樓101~106</span> </div> <div class="div-btm-center"> <div class="div-btm-reph"> <span class="divpc-contact-top">客服熱線1：0123-87654321 <i class="btm-time"> 工作日9:00-17:30</i><br />客服熱線2：0123-12345678 <i class="btm-time"> 工作日9:00-17:30</i><br />QQ客服：123456789</span> <i class="div-right-qq"><a href="" class="divpc-online onlineChat">在線客服</a></i> <div class="c"></div> </div> </div> <div class="div-btm-right"> <span class="gz"><i class="khd"></i><span class="ph-gzh">微信學習群</span></span> <span class="gz"><i class="gzh"></i><span class="ph-gzh">官方公眾號</span></span> </div> <div class="c"></div> </div> <div class="div-btm-info"> <div class="div-btm-gg" style="display: none;"> <a target="_blank" class="div-btm-pic"><i class="wangxin"></i></a> <a target="_blank" class="div-btm-pic"><i class="kx"></i></a> <a target="_blank" class="div-btm-pic"><i class="gt"></i></a> <a target="_blank" class="div-btm-pic"><i class="360"></i></a> <a target="_blank" class="div-btm-pic"><i class="icp"></i></a> <a target="_blank" class="div-btm-pic"><i class="djcp"></i></a> <a target="_blank"><img src="images/ebsIcon.png" title="" alt="" width="32" height="45" border="0" style="border-width:0px;border:hidden; border:none;" /></a> <a class="c"></a> </div> <div class="c"></div> <div class="copyright"> Copyright © 2012-2018 www.123456.com All Rights Reserved | 生態家裝公司 <span> | <a style="color:#4e5158;" href="" target="_blank">京ICP備123456789號</a></span> </div> </div> </div> </div>
最后，看一下index.html文件，全部代碼示下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo演示</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <!-- 頂部導航 --> <div class="headerpage"></div> <!--頂部導航 over--> <!--中部主體--> <p>···代碼省略···</p> <!--中部主體 over--> <!--footer--> <div class="footerpage"></div> <!--footer over--> <script src="js/jquery.min.js"></script> <script> $(function(){ /*公共部分 * 導航欄 * footer CopyRight */ $(".headerpage").load("header.html"); $(".footerpage").load("footer.html"); }); </script> </body> </html>
通過上面的描述，可以發現：
在header.html和footer.html文件中，並非是標准的html文檔格式！
與此同時，通過index.html中的jQuery函數load()將上述的兩個公共文件引入進來，從而形成一個完整的頁面；
並且，不會影響到其他頁面對於公共文件的引用和使用；
值得注意的是：
在靜態文件：header.html的頁眉代碼中，有一段代碼：
<script src="js/public_share_code.js"></script>
這段代碼，必須在header.html中引入！
否則，關於導航欄最頂部的頁眉中mousehover()微信圖標，JS懸浮顯示微信二維碼的效果，將會失效！