使用iframe的方式实现共用的头部和尾部页面

最新推荐文章于 2024-07-20 22:40:04 发布

考拉的墨尔本

最新推荐文章于 2024-07-20 22:40:04 发布

阅读量8.7k

点赞数 1

文章标签： javascript 页面共享前端开发

本文链接：https://blog.csdn.net/yaojxing/article/details/72972974

版权

在前端开发中，有些页面的头部和尾部是一模一样的，如果我们每个页面都重新写一次，那样会很麻烦，这时候我们可以将头部和尾部提取出来，让所有的页面都可以复用头部和尾部，减轻我们的工作量。

1.实现过程

通过html标签<iframe></iframe>来实现。步骤是:在主页页面开始位置增加以下代码:

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="index6.html" width="100%"  height="50px"></iframe>

例如下面的例子--假设头部是index6.html,我们正在编辑的页面是index7.html。

头部index6.html(一个简单的导航):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>头部</title>
        <style type="text/css">
        	body{
        		margin:0;
        		padding:0;
        		font-size:12px;
        	}
        	ul{
        		list-style:none;
        	}
        	ul li{
        		background: blue;
				float:left;
				width:70px;
				height:30px;
				line-height:30px;
				margin:5px;
				text-align:center;
        	}
        	li:first-child{
        		background: red;
        	}
        	li a{
        		display:block;
        		color:#fff;
        		text-decoration:none;
        	}
        	li a:hover{
        		background: red;
        	}

        </style>
    </head>
    <body>
    	<ul>
    		<li><a href="#">第一项</a></li>
    		<li><a href="#">第二项</a></li>
    		<li><a href="#">第三项</a></li>
    		<li><a href="#">第四项</a></li>
    	</ul>
    </body>
</html>

我们的主页面index7.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
		<div>
			<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="index6.html" width="100%"  height="50px">
  			</iframe>
		</div>
		<div>
			办正事的页面
		</div>
    </body>
</html>