一、两者的相同点和不同点
相同点：
iframe 和frameset都是html布局的框架布局
不同点：
iframe是一个内联框架，是在页面里生成内部框架
frameset定义一个框架集，包含多个子框架，每个框架都是独立的文档
二、iframe标签
iframe是个内链框架，是在页面里生成个内部框架
2.1格式
<iframe src=""></iframe>
2.2属性
frameborder {int}：是否显示框架的边框；【】0 不显示 1 显示
src {URL}：指定一个资源(如网页、图片)的uri；
scrolling {boolean}：是否显示框架的滚动条；【yes/no/auto】有兼容性问题
noresize 无法调整框架的大小；【noresize="noresize"】
name 框架的名称。
2.3范例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;}
.clearfloat{zoom:1}
body{
height:90vh;
}
.box{
height:100%;
}
.left{
float:left;
}
.right{
height:100%;
overflow: hidden;
border:1px solid red;
}
</style>
</head>
<body>
<div class="box clearfloat">
<div class="left">
<input type="button" name="aa" value="国家" onclick="clickFn('input')"/>
<input type="button" name="aa" value="星球" onclick="clickFn('input2')"/>
</div>
<div class="right">
<iframe id="mainIframe" style="width:100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe>
</div>
</div>
<script>
function clickFn(src){
window.open(src +'.html','mainIframe');
//document.getElementById('mainIframe').src = src +'.html';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;}
.clearfloat{zoom:1}
body{
height:90vh;
}
.box{
height:100%;
}
.left{
float:left;
}
.right{
height:100%;
overflow: hidden;
border:1px solid red;
}
</style>
</head>
<body>
<div class="box clearfloat">
<div class="left">
<input type="button" name="aa" value="国家" onclick="clickFn('input')"/>
<input type="button" name="aa" value="星球" onclick="clickFn('input2')"/>
</div>
<div class="right">
<iframe id="mainIframe" style="width:100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe>
</div>
</div>
<script>
function clickFn(src){
window.open(src +'.html','mainIframe');
//document.getElementById('mainIframe').src = src +'.html';
}
</script>
</body>
</html>
效果：
2.4注意事项
在 "<iframe>我是内容</iframe>" 内添加内容时，在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。
三、frameset标签
frameset 标签 定义一个框架集，包含多个框架，每个框架都有独立的文档
3.1 格式
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm"></frame>
<frame src="frame_b.htm"></frame>
<frame src="frame_c.htm"></frame>
<noframes></noframes>
</frameset>
3.2子项说明
<frame src=a.htm /> ：子框架 <noframes></noframes>：浏览器不支持此框架的时，显示的内容。
3.3属性
frameset 属性：
rows ：表示子框架按行的样式布局（
）。以2个子框架为例：rows="30%,*" ，表示第一个框架占整个页面30%的高度，第二个占剩下的；
cols ：表示子框架按列的样式布局(
)。以2个子框架为例：cols="30%,*" ，表示第一个框架占整个页面30%的长度，第二个占剩下的；
noresize="noresize" ：表示不调整子框架的范围。
frame 属性：
src ：指向一个资源(如页面、图片等)的URI； name ：指定框架的名称，以便进行框架间的操作。
3.4注意事项
使用frameset标签时，注意要去掉外层的<body></body>标签。
1.<iframe>优点：
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
2.<iframe>的缺点：
*iframe会阻塞主页面的Onload事件；
*即时内容为空，加载也需要时间
*没有语意