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

相同点：

    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事件；

     *即时内容为空，加载也需要时间

     *没有语意

【html】 iframe 和 frameset 的区别的更多相关文章

  1. HTML iframe 和 frameset 的区别

    转自:http://www.cnblogs.com/polk6/archive/2013/05/24/3097430.html HTML iframe 和 frameset 的区别 iframe 和 ...

  2. html Frame、Iframe、Frameset 的区别 详细出处参考：http://www.jb51.net/web/22785.html

    10.4.1 Frameset与Frame的区别首先讲解Frameset与Frame之间的区别. 用来划分框架,每一个框架由标记.必须在之内使用,代码如下: 在上面的例子当中,把页面分为左右两个部分, ...

  3. iframe与frameset有什么区别

    frame,iframe,frameset 的区别 <FRAMESET> <FRAME><NOFRAMES><IFRAME>欲明白本篇[HTML剖析]之 ...

  4. 使用iframe的优缺点，为什么少用iframe以及iframe和frame的区别。

    注:HTML5不再支持使用frame,iframe只有src 属性一.使用iframe的优缺点优点:1.程序调入静态页面比较方便;2.页面和程序分离;缺点:1.iframe有不好之处:样式/脚本需要额 ...

  5. html/css基础篇——iframe和frame的区别【转】

    转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...

  6. 详解iframe与frame的区别

    iframe与frame的区别 一.使用iframe的优缺点 优点: 1.程序调入静态页面比较方便; 2.页面和程序分离; 缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外 ...

  7. 使用iframe 或frameset框架退出不成功

    iframe .frameset框架有时登录界面加载在框架当中,但我们想直接到登录界面,这时我们可以使用js来实现.if(window!=top) { top.location.href=locati ...

  8. html部分---表单、iframe、frameset及其他字符的用法（以及name、id、value的作用与区别）；

    <form action="aa.html" method="post/get"> /action的作用是提交到..,methed是提交方法,用po ...

  9. iframe与frameset（转载）

    frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里 frameset        它称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割 fram     ...

随机推荐

  1. incredibuild(分布式任务软件)脚本

    IncrediBuild 可以在Server段通过修改单个任务的进程上限来实现提升任务执行速度. IncredBuild本机版也可以用来进行本机实现多线程任务分发,这样可以充分利用多核资源. 提交分布 ...

  2. Java堆大小[z]

    JVM中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制. 32位系统下,一般限制在1.5G~2G:64为操作系统对内存 ...

  3. RedHat Enterprise7 搭建ISCSI

    IP 主机名 作用 10.45.129.113/24      外网 172.16.1.10/24        内网 rac1 RAC节点1 10.45.129.114/24      外网 172 ...

  4. LINUX 的网站压力测试工具 webbench

    网站压力测试工具-Webbench webbench简介:        Webbench是有名的网站压力测试工具,它是由 Lionbridge公司(http://www.lionbridge.com ...

  5. pycharm建立django工程

    1.windows上安装了python 用pycharm建立django工程,必须要连接本地的python,也就是windows上的pyhton,不能连接linux上的pyhton,否则报错:plea ...

  6. Code First EF 多对多时拆分两个一对多

    (*)多对多中还可以为中间表建立一个实体方式映射.当然如果中间关系表还想有其他字段,则要必须为中间表建立实体类(中间表和两个表之间就是两个一对多的关系了). demo项目 WebApp22 GitHu ...

  7. Django之contenttypes组件

    目录 一. 介绍 二. 应用场景 1. 表结构设计的演变 2. GenericForeignKey和GenericRelation 3. 测试 一. 介绍 Django包含一个contenttypes ...

  8. 【VS开发】CFormView

    原文地址:CFormView作者:罗纳尔多 CFormView是MFC使用无模式对话框的一个典型例子.CFormView是基于对话框模板创建的视,它的直接基类是CSrcollView,CSrcollV ...

  9. Linux文件属性之Linux文件删除重要原理详解

    Linux下文件删除的原理 只要dongdaxiafile(源文件).服务进程.dongdaxiaflie_hard_link(硬链接文件)三个中的任意一个存在文件不会被删除.

  10. SpringBoot整合MyBatis完成添加用户

    怎么创建项目就不说了,可以参考:https://www.cnblogs.com/braveym/p/11321559.html 打开本地的mysql数据库,创建表 CREATE TABLE `user ...