一、div + iframe与frameset + frame对比
| frameset+frame | div+iframe | |
|---|---|---|
| 区域划分 | cols 和 rows | css 中 height 和width |
| 边框 | frameborder | css 中 border |
| 链接 | name + target | name+target |
| 覆盖范围 | 一般不会重合 | 注意css中设置的范围 |
2、name + target的使用 实现点击a页面中的标签，b页面发生变化
name=“content”： 给需要变化的页面命名
target=“content”： 是变化页面的name
示例：
frameset ：
<html>
<frameset cols="20%,*" frameborder="no">
<frame src="left.html">
<frameset rows="7%,*" frameborder="no">
<frame src="head.html">
<frame src="content.html" name="content">
</frameset>
</frameset>
</html>
left.html:
<a href="one.html" target="content">content.html页面被one.html替换</a>
3、frameset + frame 与 div + iframe 转换
frameset ：
<html>
<frameset cols="20%,*" frameborder="no">
<frame src="left.html">
<frameset rows="7%,*" frameborder="no">
<frame src="head.html">
<frame src="content.html" name="content">
</frameset>
</frameset>
</html>
div + iframe
<style>
body {
margin:0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#frameLeft {
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 100%;
overflow: hidden;
background: red;
}
#frameHead {
position: fixed;
top: 0;
right: 0;
height: 7%;
width: 100%;
overflow: hidden;
background: green;
}
#frameContent {
position: absolute;
left: 20%;// 不与frameLeft部分重合
top: 7%;// 不与frameHead部分重合
height: 100%;
width: 100%;
overflow: hidden;
background: blue;
}
</style>
<body>
<div>
<iframe id="frameLeft" src="left.jsp"></iframe>
<div>
<iframe id="frameHead" src="head.jsp" style="border: 0;"></iframe>
<iframe id="frameContent" src="content.jsp" style="border: 0;" name="content"></iframe>
</div>
</div>
</body>
运行效果：
参考文章：
html5实现frame效果,html5 frameset标签的替代方案是什么
frameset的基础使用方法
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
