如何讓html引用公共的頭部和尾部（多個html文件公用一個header.html和footer.html）

目錄

1、問題描述

2、解決方案

3、示例代碼

---

1、問題描述

目前在做公司的一個網站，靜態頁面有很多，頂部導航和底部導航都是相同的，在每個頁面中寫頭部和底部是可以的，但是修改

起來特別費時費力，後期很難維護。那麼如何實現多個.html靜態頁，引用同一個header.html和footer.html文件呢？

前端靜態html頁面，封裝公共的頭文件（header：頂部頁眉，頂部導航欄等部分）和尾部文件（footer：CopyRight、友情鏈接等

部分）

HTML如何引用公共的頁眉頭部header.html文件和尾部footer.html文件？下面就來記錄一下常用的方法：

2、解決方案

當前方法：通過load()函數，引入公共頭部和尾部文件;

代碼預覽：

<div id="head"></div>
<script type="text/javascript">
    $('#head').load('components/head.html');
    $('#footer').load('components/footer.html');
</script>

3、示例代碼

header.html頂部導航部分的靜態頁面，全部代碼示下：

<div class="head">
    <img src="img/logo.png" class="logo" alt=""/>
    <div class="wrapper">
        <nav><img src="img/logo.png" class="logos" alt=""/>
            <div id="drop">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </nav>
        <ul>
            <li><a href="index.html">首頁</a></li>
            <li><a href="service_case.html">服務案例</a></li>
            <li><a href="product_center.html">產品中心</a></li>
            <li><a href="media_center.html">媒體中心</a></li>
            <li><a href="operating_center.html">運營中心</a></li>
            <li><a href="service_and_support.html">服務與支持</a></li>
            <li><a href="about_us.html">關於我們</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $('#drop, nav ~ ul li').click(function() {
      $('nav, #drop span').toggleClass('open');
      $(window).scrollTop(0);
    });
    $('#drop>div').click(function(){
        $('.logos').toggleClass('blo')
    })
</script>

其次，看一下footer.html文件，全部代碼示下：

<footer class="footer">
    <p class="return">回到頂部<span class="glyphicon glyphicon-menu-up"></span></p>
    <ul id="accordion" class="accordion">
        <li>
            <div class="link">服務案例<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link">產品中心<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link">媒體中心<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link"><a href="operating_center.html" style="color: #a5a5a5;">運營中心</a></div>
        </li>
        <li>
            <div class="link">服務與支持<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link"><a href="about_us.html" style="color: #a5a5a5;">關於我們</a></div>
        </li>
    </ul>
    <div class="footer_qrcode">
        <img src="img/weixin_qrcode.png" alt="" />
        <p>
            <a>關注公衆號</a>
            <a>瞭解更多資訊</a>
        </p>
        <hr />
        <span>© 2012-2020 版權所有</span>
        <span>****科技有限公司<a style="color: #ffffff" href="http://www.beian.miit.gov.cn" target="_blank">&nbsp;&nbsp;滬ICP備16004537號-1</a></span>
    </div>
</footer>
<script type="text/javascript">
    $(function() {
        var Accordion = function(el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;
            var links = this.el.find('.link');
            links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
        }
        Accordion.prototype.dropdown = function(e) {
            var $el = e.data.el;
                $this = $(this),
                $next = $this.next();
            $next.slideToggle();
            $this.parent().toggleClass('open');
            if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            };
        }    
        var accordion = new Accordion($('#accordion'), false);
    });
    //滑動高度監測
    var scrollTop;
    var timer = null;
    //監測當前屏幕高度
    window.onscroll = function() {
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        return scrollTop;
    }
    //點擊返回頂部
    $('.return').click(function(){
        clearInterval(timer);
        timer = setInterval(function() {
            var now = scrollTop;
            var speed = (0 - now) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(scrollTop == 0) {
                clearInterval(timer);
            }
            document.documentElement.scrollTop = scrollTop + speed;
            document.body.scrollTop = scrollTop + speed;
        }, 35)
    })
</script>

最後，看一下index.html文件，全部代碼示下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>首頁</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/join_investment_details.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--通用頂部導航-->
<div id="head"></div>
<script type="text/javascript">
    $('#head').load('components/head.html')
</script>
<!--通用頂部導航 結束-->

<!--熱點資訊列表-->
<section class="join_investment_details">
    <div class="details-img">
        <img src="img/join_investment_info/18.png" alt="">
    </div>
    <div class="details-content container_content">
        <h5>開業支持</h5>
        <p>選擇、設計、駐店指導</p>
        <ul>
            <li>選址支持：公司協助在當地高端建材城優先選擇最優店面</li>
            <li>設計支持：店面智能化方案免費設計，製作最佳的客戶體驗動線。</li>
            <li>駐店指導：店面管理標準化打造，運營部門統一輸出指導</li>
            <li></li>
        </ul>
    </div>
</section>
<!--熱點資訊列表 結束-->

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--通用底部導航-->
<div id="footer"></div>
<script type="text/javascript">
    $('#footer').load('components/footer.html')
</script>
<!--通用底部導航 結束-->
</body>
</html>

通過上面的描述，可以發現：

在header.html和footer.html文件中，並非是標準的html文檔格式！

與此同時，通過index.html中的jQuery函數load()將上述的兩個公共文件引入進來，從而形成一個完整的頁面；並且，不會影響到

其他頁面對於公共文件的引用和使用；

以上就是關於靜態html文件，使用公共頭部和尾部的解決辦法之一。

關於其他方法，以後再補充。