当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: 做前端项目时遇到导入公共部分的问题，因为合并的时候复制公共部分复制到吐。。

html引入公共部分（header、footer等）

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

 1. 使用iframe标签

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

举例：如导入header导航栏

初步使用iframe导入发现的问题：

1. 会显示有高度为0的body       

        原因：公共部分的html包含了头部标签元素

                   一个页面不能有多个head、body等

        解决方法：公共部分的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后开始编写代码

第一步：编写header的html

做法：公共部分的页面只需要写<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进行投诉反馈，一经查实，立即删除！

上一篇 [ArkTs]UI开发
下一篇 [数据结构]线性表1 C++编程作业

相关文章

发表回复

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

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。