一、两者的相同点和不同点

相同点:
    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>
View Code

相关文章:

  • 2021-12-07
  • 2022-02-19
  • 2021-05-20
  • 2021-05-29
  • 2021-07-21
猜你喜欢
  • 2021-08-17
  • 2021-09-20
  • 2021-12-03
  • 2021-12-03
  • 2022-01-05
相关资源
相似解决方案