【前端用法】如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）

本文目录

一、问题描述

二、解决方案

三、示例代码

---

一、问题描述

目前在做公司的一个网站，静态页面有很多，顶部导航和底部导航都是相同的，在每个页面中写头部和底部是可以的，但是修改

起来特别费时费力，后期很难维护。那么如何实现多个.html静态页，引用同一个header.html和footer.html文件呢？

前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件（footer：CopyRight、友情链接等部分）

HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件？下面就来记录一下常用的方法：

二、解决方案

当前方法：通过load()函数，引入公共头部和尾部文件;

代码预览：

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

三、示例代码

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文件，使用公共头部和尾部的解决办法之一。

关于其他方法，以后再补充。

完结！