转自：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权威指南(第六版)》

　　

　　

转载于:https://www.cnblogs.com/sharpest/p/7725356.html

HTML iframe 和 frameset 的区别相关推荐

  1. Frame、Iframe、Frameset 的区别

    10.4  Frame.Iframe.Frameset 的区别 框架页有Frame.Iframe.Frameset 3个标记,初学者容易将三者混淆,下面分别讲解三者的区别. 10.4.1  Frame ...

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

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

  3. 在html语言中frame,html Frame、Iframe、Frameset 的区别

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

  4. 转 框架页有Frame、Iframe、Frameset 3个标记，初学者容易将三者混淆，下面分别讲解三者的区别。...

    框架页有Frame.Iframe.Frameset 3个标记,初学者容易将三者混淆,下面分别讲解三者的区别. 10.4.1  Frameset与Frame的区别 首先讲解Frameset与Frame之 ...

  5. frame,iframe,frameset 的区别

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

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

    出处:http://gongxquan.blog.163.com/blog/static/2108462532012111643039216 使用iframe的优缺点,为什么少用iframe以及ifr ...

  7. html div代替frameset,用div+iframe替代frameset

    用div+iframe替代frameset (2011-05-21 19:14:39) 使用div+iframe标签配合JavaScript是可以替代frameset的 示例代码: //======= ...

  8. iframe 、frameset 、frame的区别

    iframe 一.iframe属性的用法 标签规定一个内联框架.内联框架可以在当前的HTML文档中插入框架,框架内可以链接另一个页面 它是 一个围堵标记,但围着的字句只有在浏览器不支援 iframe ...

  9. 浅谈Iframe和FRAME的区别

    一.Iframe标记的使用 Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件.现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个" ...

最新文章

  1. vue 如何防止xss攻击 框架_LearningNotes-1/Vue/Vue中防止XSS脚本攻击 at master · axuu/LearningNotes-1 · GitHub...
  2. iPhone开发的一些小技巧
  3. POJ 3356 水LCS
  4. 一个略复杂的数据映射聚合例子及代码重构
  5. 08:vigenère密码_密码技术：Vigenére密码，Playfair密码，Hill密码
  6. 安卓手机阅读器_乐应用｜安卓手机本地阅读的不二之选
  7. Python机器学习：评价分类结果003实现混淆矩阵，精准率和召回率
  8. Smart ORM v0.3发布(完全面向对象的轻量级ORM工具)
  9. directUI的心得
  10. 在linux上使用scp命令拷贝一个目录到另一台服务器的时候报not a regular file错误的解决办法...
  11. python数字猜大小游戏
  12. Java编程ture找不到符号,［未解决］Bugly中上传符号表dSYM文件
  13. 如何在MAC上查看系统运行信息、内存使用率等
  14. uniapp本地数据库_App/uni-app离线本地存储方案
  15. uniapp预览pdf安卓打不开，可以直接新建commonwebview来跳转外部链接浏览pdf
  16. Vue框架的初识入门
  17. Universal Termsrv.dll Patch 是个好东西
  18. java采用MD5加密解密
  19. 诺基亚n1 android 6.0,数据解读诺基亚N1：安卓平板王者之争
  20. 使用小波包变换分析信号的matlab程序,使用小波包变换分析信号的MATLAB程序（转）...

热门文章

  1. win8 下免安装版mysql
  2. 总结ISO各层协议都有哪些
  3. mysql一个死锁分析
  4. Linux下利用backtrace追踪函数调用堆栈以及定位段错误【转】
  5. 思科高级路由与交换(CISCO 部分) 第5天
  6. hadoop搭建在Ubuntu16.04上
  7. TOJ 3750: 二分查找
  8. Emoji表情符号录入MySQL数据库报错的解决方案
  9. java内存模型 年轻代/年老代 持久区
  10. python基础之day1