HTML引入公共导航栏及导航栏下拉框被覆盖的解决方法

最新推荐文章于 2024-05-14 09:55:02 发布

我家兔子爱挑食

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量3.9k

点赞数 6

分类专栏：前端文章标签： html 引入公共导航栏下拉框被覆盖内联框架 iframe

本文链接：https://blog.csdn.net/weixin_44491927/article/details/96287510

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html中引入导航栏可以使用 iframe 内联框架首先制作一个公用头部文件 head.html ,在需要引入头部文件的开始位置增加以下代码：

 <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 
    SCROLLING=no src="head.html" height=“auto” width="100%"></iframe>

例如：head.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>头部文件</title>
    </head>
    <body>
    	<div class="head" style="height: 300px;
    	width: 100%;background: red">
    	</div>
    </body>
    </html>

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>引用头部的文件</title>
    </head>
    <body>
       <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 
       SCROLLING=no src="head.html" width="100%"  height="auto">
      </iframe>
    </body>
    </html>

用内联框架的方式嵌入头部，更改头部样式时，不必每个页面都全改一遍，方便了代码维护，能减轻很多工作量，但是我使用的头部导航栏有下拉框。用iframe的方式嵌入发现首页无法显示下拉框，总是被下面的元素遮盖，无论怎么调z-index，都不能使其显示出来。找了好多种方法，最后解决的方法时将head.html转换为head.js 。然后只需要在index,html文件的开头调用，就可以解决下拉框被遮盖的问题。

    <script type="text/javascript" src="head.js"></script>

html转换js文件，可以用站长工具在线转换 http://tool.chinaz.com/Tools/Html_Js.aspx

转换后的 head.js 文件

    document.writeln("<!DOCTYPE html>");
    document.writeln("<html lang=\'en\'>");
    document.writeln("<head>");
    document.writeln("	<meta charset=\'UTF-8\'>");
    document.writeln("	<title>头部文件</title>");
    document.writeln("</head>");
    document.writeln("<body>");
    document.writeln("	<div class=\'head\' style=\'height: 300px;");
    document.writeln("	width: 100%;background: red\'>");
    document.writeln("	</div>");
    document.writeln("</body>");
    document.writeln("</html>");

index.html 调用公共头部文件

    <!DOCTYPE html>
    <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>引入头部的文件</title>
        	<!-- 导航栏 -->
        	<script type="text/javascript" src="head.js"></script>
        </head>
        <body>
        
        </body>
    </html>

这样便实现了HTML引入公共导航栏，并且解决了导航栏下拉框被覆盖的问题。

我家兔子爱挑食

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
HTML引入公共导航栏及导航栏下拉框被覆盖的解决方法

html中引入导航栏可以使用 iframe 内联框架首先制作一个公用头部文件 head.html ,在需要引入头部文件的开始位置增加以下代码：<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" height=“auto” width="100%...
复制链接

扫一扫

专栏目录