转自：http://www.cnblogs.com/polk6/archive/2013/05/24/3097430.html

HTML iframe 和 frameset 的区别

　　iframe 和 frameset 都用于html页面的框架布局。

目录：

1. <iframe> 标签：iframe 是个内联框架，是在页面里生成个内部框架。

2. <frameset> 标签：frameset 定义一个框架集，包含多个子框架，每个框架都有独立的文档。

1. <iframe> 标签

iframe 是个内联框架，是在页面里生成个内部框架。

1.1 格式

<iframe></iframe>

1.2 属性

frameborder {int}：是否显示框架的边框；

src {URL}：指定一个资源(如网页、图片)的uri；

scrolling {boolean}：是否显示框架的滚动条；

width {int}：定义iframe的宽度；

height {int}：定义iframe的高度；

1.3 示例

<body>

<h3>HTML标签演示</h3>

<iframe src=1.1-ShowHtml.htm ></iframe>

</body>

1.4 注意事项

在 "<iframe>我是内容</iframe>" 内添加内容时，在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。

1.5 应用场景

1) 版本升级页面，版本日志过多，可以把升级的信息放到一个iframe里。
2) 富文本编辑框，如博客园的【新建随笔】区域。

2. <frameset> 标签

frameset 定义一个框架集，包含多个框架，每个框架都有独立的文档。

2.1 格式

<frameset >
　　<frame src=a.htm />
　　<frame src=b.htm />

　　<noframes></noframes>
</frameset>

2.2 子项说明

<frame src=a.htm /> ：子框架

<noframes></noframes>：浏览器不支持此框架的时，显示的内容。

2.3 属性

frameset 属性：

　　rows ：表示子框架按行的样式布局（）。以2个子框架为例：rows="30%,*" ，表示第一个框架占整个页面30%的高度，第二个占剩下的；

　　cols ：表示子框架按列的样式布局()。以2个子框架为例：cols="30%,*" ，表示第一个框架占整个页面30%的长度，第二个占剩下的；

　　noresize="noresize" ：表示不调整子框架的范围。

frame 属性：

　　src ：指向一个资源(如页面、图片等)的URI；

　　name ：指定框架的名称，以便进行框架间的操作。

2.4 示例

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>frameset 演示</title>

</head>

<frameset rows="30%,*"  noresize="noresize">

    <frame src=DateGrid.htm name="frm1"  />

    <frame src=Dialog.htm  name="frm2"/>

    <noframes></noframes>

</frameset>

</html>

2.5 注意事项

使用frameset标签时，注意要去掉外层的<body></body>标签。

2.6 子框架间的操作

参照示例代码，frm1更改frm2的子集指向的页面：window.parent.frames["frm2"].location.href = 'b.htm'

2.7 应用场景

1) 后台页面的管理，左边显示 菜单，右边框架 显示详细页面。

2) 功能菜单页面，如bbs.csdn.net

3. 小知识

　　浏览页面中的框架时，在框架页面内 点击右键，会多出框架的信息。

以chrome为例：

　　

==================================系列文章==========================================

本篇文章：1.3 HTML iframe 和 frameset 的区别

Web开发之路系列文章

1.HTML

　　1.1 HTML页面源代码布局介绍

　　1.2 HTML基础控件介绍

　　1.3 iframe 和 frameset 的区别

　　1.4 name、id、class 的区别

　　1.5 table、form表单标签的介绍以及get和post提交方式

　　1.6 HTML kbd键盘元素

　　1.7 HTML 鼠标坐标和元素坐标

2.CSS 层叠样式表

　　2.1 CSS 选择器及各样式引用方式

　　2.2 CSS HTML元素布局及Display属性

　　2.3 CSS Float 浮动属性

　　2.4 CSS Position 定位属性

　　2.5 CSS border-radius边框圆角

　　2.6 CSS background-image背景图片相关介绍

3.JavaScript介绍

　　3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

　　3.2 JavaScript function函数种类

　　3.3 JavaScript Array对象

　　3.4 JavaScript Date对象

　　3.5 JavaScript Math和Number对象

　　3.6 JavaScript String对象

　　3.7 JavaScript Object对象

　　3.8 JavaScript 自定义对象

　　3.9 JavaScript 对象属性介绍

　　3.10 JavaScript 开发规范

　　3.11 JavaScript 加号运算符详解

4.BOM

　　4.1 HTML BOM Browser对象

　　4.2 HTML 获取屏幕、浏览器、页面的高度宽度

　　4.3 HTML URL地址解析

5.DOM

　　5.1 HTML DOM 介绍

　　5.2 HTML DOM 对象

　　5.3 HTML 事件(一) 事件的介绍

　　5.4 HTML 事件(二) 事件的注册与注销

　　5.5 HTML 事件(三) 事件流与事件委托

　　5.6 HTML 事件(四) 模拟事件操作

6.HTML5

　　6.1 HTML5 介绍

　　6.2 HTML5 语义元素(一)页面结构

　　6.3 HTML5 语义元素(二)文本内容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控件

　　6.6 HTML5 sessionStorage会话存储

　　6.7 HTML5 localStorage本地存储

　　6.8 HTML5 元素属性介绍

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介绍

　　7.2 ExtJS 4.2 第一个程序

　　7.3 ExtJS 4.2 组件介绍

　　7.4 ExtJS 4.2 组件的查找方式

　　7.5 ExtJS 4.2 业务开发(一)主页搭建

　　7.6 ExtJS 4.2 业务开发(二)数据展示和查询

　　7.7 ExtJS 4.2 业务开发(三)数据添加和修改

　　7.8 ExtJS 4.2 Grid组件的单元格合并

　　7.9 ExtJS 4.2 Date组件扩展：添加清除按钮

　　7.10 ExtJS 4.2 评分组件

　　

　　只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

　　参考文献：

　　1）http://www.w3school.com.cn/

　　2）《JavaScript权威指南(第六版)》

　　

　　

HTML iframe 和 frameset 的区别的更多相关文章

  1. 【html】 iframe 和 frameset 的区别

    一.两者的相同点和不同点 相同点: iframe 和frameset都是html布局的框架布局 不同点: iframe是一个内联框架,是在页面里生成内部框架 frameset定义一个框架集,包含多个子 ...

  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. kindeditor文本编辑器乱码中乱码问题解决办法

    这个问题我已经解决掉了,不是更改内容的编码格式,只要将lang/zh_CN.js  这个文件的编码转换成unicode即可 操作方法是 用记事本打开这个文件,另存为,然后更改文件的编码格式为unico ...

  2. Java基础4一数组

    数组 数组是用来存储一组相同类型数据的数据结构 数组变量属于引用数据类型 数组中的元素可以是任何数据类型(基本类型和引用类型) 备注:数组中存放的都是相同数据类型的数据. 1.一维数组的声明 语法:数 ...

  3. MAVEN学习笔记之Maven插件的应用（4）

    MAVEN学习笔记之Maven插件的应用(4) <build> <pluginManagement> <plugins> <plugin> <gr ...

  4. [转]C++内存管理

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  5. VS2015 & ReSharper CTRL

    如下为个人比较常用的快捷键,部分快捷键有进行修改. 一.VS偏好设置: 1.转到定义:F12 2.查找所有引用:Shift + F12 3.跳转到指定的某一行:Ctrl + G (or 单击状态栏中的 ...

  6. Nginx下修改php.ini后重新加载配置文件命令

    修改php.ini后 如,我的 php.ini 文件是放在 /etc/php.ini php 所在目录是 /www/Linux/php-5.2.17 修改 php.ini 后要用 php-fpm 来进 ...

  7. nginx配置和测试

    测试nginx处理能力和IO读写能力,使用工具webbench.iozone. 1.nginx测试 使用webbench工具,增加并发量,时间分别取30s,60s 1.webbench -c 200 ...

  8. Kattis - Different Distances

    Input The input file contains up to 10001000 test cases, each of which contains five real numbers, x ...

  9. vc++图像保存，重绘

    新建mfc应用程序,单文档 增加绘图 分别增加命令响应 添加成员变量UINIT 图形可以运行,如何保存呢?(一个集合类,CPtArt) 用一个类的对象来保存一个图形的三个要素 所以插入一个新的类(通常 ...

  10. Codeforces Round #447 (Div. 2)E. Ralph and Mushrooms

    Ralph is going to collect mushrooms in the Mushroom Forest. There are m directed paths connecting n  ...