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

深藏阁楼爱情的钟 2022-06-14 04:44 235阅读 0赞

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

## 1.实现过程 ##

通过html标签<iframe></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指令的方式实现共用页面的步骤。