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

骑猪看日落 2023-07-16 09:56 10阅读 0赞

**本文目录**

一、问题描述

二、解决方案

三、示例代码

--------------------

# 一、问题描述 #

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

起来特别费时费力，后期很难维护。那么如何实现多个**.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">  沪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文件，使用公共头部和尾部的解决办法之一。

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

完结！