html引入公共部分headerfooter等)

引入公共部分的好处:把公共部分提取出来,修改代码需要每个html都去修改,只需要修改一份。

 1. 使用iframe标签

缺点:无法异步加载外部js

举例:如导入header导航

初步使用iframe导入发现问题

1. 会显示高度为0的body       

        原因:公共部分html包含头部标签元素

                   一个页面不能有多个headbody

        解决方法:公共部分html只写body里面内容

2. 导航二级菜单显示不出来 

        原因iframe部分高度固定       

       解决方法设置高度足够高,但由于过高会挤压遮盖下面内容第二步设置绝对定位position:absolute; z-index:999;

3. 有边框滚动条

        原因:将 iframe属性frameborder=”0″ scrolling=”no设置no

iframe属性有:

属性 描述
align

不赞成使用。请使用样式代替。

规定如何根据周围的元素对齐框架

frameborder
  • 1
  • 0
规定是否显示框架周围的边框
height 规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述
marginheight pixels 定义 iframe顶部底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe名称
referrerpolicy 规定 iframe名称
sandbox 启用系列对 <iframe> 中内容额外限制
scrolling 规定是否在 iframe 中显示滚动条
seamless seamless 规定 <iframe> 看上去像是包含文档的一部分
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 <iframe> 中显示的页面的 HTML 内容
width 定义 iframe 的宽度

了解了iframe后开始编写代码

一步编写headerhtml

做法:公共部分的页面只需要写<body>的里面标签(不包括body),不需要写头部标签元素

可以在最上面导入css样式js

<!-- 外链css -->
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="font/iconfont.css">
<!-- js -->
<script src="js/jquery-3.6.1.js"></script>
<script src="js/header.js"></script>


<header id="header" class="header_animation">
    <div class="header-box">
        <div class="logo-box">
            <a href="header.html"><img src="images/logo.e4cc2c4.svg"></a>
        </div>
        <div class="head-list-box">
            <ul class="head-list">
                <li class="head-item">
                    <a href="#">全部车型<span class="iconfont">&#xe600;</span></a>
                    <ul class="secondlist"> 
                        <li class="second-item"><a href="dynasty.html" target="_blank">王朝</a></li>
                        <li class="second-item"><a href="ocean.html"  target="_blank">海洋</a></li>
                    </ul>
                </li>
                <li class="head-item">
                    <a href="#">购车服务<span class="iconfont">&#xe600;</span></a>
                    <ul class="secondlist">
                        <li class="second-item"><a href="#">金融服务</a></li>
                        <li class="second-item"><a href="#">购车服务</a></li>
                        <li class="second-item"><a href="#">大客户服务</a></li>
                    </ul>
                </li>
                <li class="head-item">
                    <a href="yuyue.html" target="_blank">预约试驾</a>
                </li>
                <li class="head-item">
                    <a href="#">门店查询<span class="iconfont">&#xe600;</span></a>
                    <ul class="secondlist">
                        <li class="second-item"><a href="#">经销商服务</a></li>
                        <li class="second-item"><a href="#">服务店查询</a></li>
                    </ul>
                </li>
                <li class="head-item">
                    <a href="#">品牌中心<span class="iconfont">&#xe600;</span></a>
                    <ul class="secondlist">
                        <li class="second-item"><a href="#">两个不只</a></li>
                        <li class="second-item"><a href="#">三大领先</a></li>
                        <li class="second-item"><a href="#">链接共建</a></li>
                        <li class="second-item"><a href="#">一路向前</a></li>
                    </ul>
                </li>
                <li class="head-item">
                    <a href="#">集团网站</a>
                </li>
            </ul>
        </div>
        <div class="tool-box">
            <ul class="tool-list">
                <li class="tool-item" id="search-item"><a href="#"><span class="iconfont">&#xeafe;</span>搜索</a>
       
                </li>
                <li class="tool-item"><a href="login.html" target="_blank"><span class="iconfont" style="color: #f5f5f5;"></span>登录/注册</a></li>
                <li class="tool-item"><a href="#"><span class="iconfont"></span></a>
                      <ul class="tool-secondlist">
                        <li class="tool-second-item"><a href="#">金融服务</a></li>
                        <li class="tool-second-item"><a href="huiyuan.html">会员礼遇</a></li>
                        <li class="tool-second-item"><a href="#">汉唐精英萃</a></li>
                        <li class="tool-second-item"><a href="#">我迪朋友们</a></li>
                        <li class="tool-second-item"><a href="#">木兰荟</a></li>
                        <li class="tool-second-item"><a href="#">新闻资讯</a></li>
                        <li class="tool-second-item"><a href="#">品牌互动</a></li>
                    </ul>
                </li>
                <li class="tool-item"><a href="#"><span class="iconfont">
                </span>选择地区</a>
                    <ul class="tool-secondlist">
                        <span class="area" style="color: #cbc6c6;">选择地区</span>
                        <span class="area">Asia Pacific</span>
                        <li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Korea</a></li>
                        <span class="area">Europe</span>
                        <li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Europe</a></li>
                        <span class="area">Latin America</span>
                        <li class="tool-second-item"><a href="#" style="color: #cbc6c6; ">Ecuador</a></li>
                        <li class="tool-second-item"><a href="#" style="color: #cbc6c6;">Chile</a></li>
                    </ul>
                </li>
            </ul>
        </div> 
    </div>
    <div class="search-box">
    <div class="searchDiv">
        <h4>搜索</h4>
       <form method="post">
        <input type="text" placeholder="请输入您想了解的信息" id="shuru"><input type="button" id="search-btn" value="Go!">
       </form>
        
    </div>
</div>
</header>

 第二步index.html引用

   <!-- 顶部导航 -->
 <div class="headerpage" style="position:absolute;z-index:999;width: 100%;">
   <iframe src="./header.html" frameborder="0" scrolling="no" width="100%" height="500px" ></iframe>
 </div>

尾部同理

<!-- 尾部 -->
<div class="footerpage"  style="position:relative; width: 100%;">
  <iframe src="./footer.html" frameborder="0" scrolling="no" width="100%" height="450px"></iframe>
</div>

完成 ps:当时完成项目发现导入的js不出效果,但是现在效果出来了,不知道什么原因。。

 

2. 使用jquery提供的load方法

   <!-- 顶部导航 -->
 <div class="headerpage" style="position:absolute;z-index:999;width: 100%; height: 500px;">
 </div>

 <script>
  $(function(){
    $(".headerpage").load("header.html");
  })

出现问题:显示不出来

解决方法:

        1. load函数里不要写本地文件,容易引起跨域问题导致浏览器找不到页面,用域名解决的,或者本地文件部署到Tomcat

        2.在vsCode的插件场中搜索安装Live Server插件. 用“Open with Live Serve打开文件

        3.在本地搭建一个server通过url地址访问测试文件

网上搜集来的解决办法

原文地址:https://blog.csdn.net/LUOZONGW/article/details/127419886

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_49587.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注