使用iframe的方式实现共用的头部和尾部页面
Posted 考拉的墨尔本
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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指令的方式实现共用页面的步骤。以上是关于使用iframe的方式实现共用的头部和尾部页面的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS中ng-include指令实现头部和尾部的共用