【html】 iframe 和 frameset 的区别

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

相同点：
    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="width: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>
View Code

 

<!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 1.<iframe>优点：
 2 
 3     解决加载缓慢的第三方内容如图标和广告等的加载问题
 4     Security sandbox
 5     并行加载脚本
 6 
 7 2.<iframe>的缺点：
 8 
 9 
10     *iframe会阻塞主页面的Onload事件；
11 
12     *即时内容为空，加载也需要时间
13     *没有语意

 



posted on 2019-07-31 11:28  smile轉角  阅读(1287)  评论(0)  编辑  收藏  举报

导航