一、两者的相同点和不同点
相同点：
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范例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} 8 .clearfloat{zoom:1} 9 body{ 10 height:90vh; 11 } 12 .box{ 13 height:100%; 14 } 15 .left{ 16 float:left; 17 } 18 .right{ 19 height:100%; 20 overflow: hidden; 21 border:1px solid red; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="box clearfloat"> 27 <div class="left"> 28 <input type="button" name="aa" value="国家" onclick="clickFn('input')"/> 29 <input type="button" name="aa" value="星球" onclick="clickFn('input2')"/> 30 </div> 31 <div class="right"> 32 <iframe id="mainIframe" style="100%;height:100%; " name="mainIframe" src="input.html" frameborder="0" scrolling="auto" ></iframe> 33 </div> 34 </div> 35 <script> 36 function clickFn(src){ 37 window.open(src +'.html','mainIframe'); 38 //document.getElementById('mainIframe').src = src +'.html'; 39 } 40 </script> 41 </body> 42 </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="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 1.<iframe>优点： 2 3 解决加载缓慢的第三方内容如图标和广告等的加载问题 4 Security sandbox 5 并行加载脚本 6 7 2.<iframe>的缺点： 8 9 10 *iframe会阻塞主页面的Onload事件； 11 12 *即时内容为空，加载也需要时间 13 *没有语意