一、两者的相同点和不同点
相同点:
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 ></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>