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

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

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>

2.总结

使用iframe标签的方式实现共用页面的方式不是特别推荐,因为控制起来很麻烦,而且对性能的优化也不是很好,所以现在这种方式使用的很少。我会在下一篇博客中介绍通过使用js代码的方式和Angular指令的方式实现共用页面的步骤。
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值