frame和iframe框架

frame框架

1、框架概念
将浏览器的主窗口分成几个独立的窗口框架,每个框架会同时显示一个不同的网页。框架主要用于后台框架与文档浏览器

2、框架基本结构
框架由框架集(frameset)和框架(frame)组成

3、框架结构语法:

<frameset cols="25%,50%,25%">
    <frame src="frame_a.htm" />
    <frame src="frame_b.htm" />
    <frame src="frame_c.htm" />
</frameset>

4、框架集frameset标签属性

  • cols:定义框架集中列的数目和尺寸
  • rows:定义框架集中行的数目和尺寸
  • border:设置框架集的边框厚度,单位像素
  • bordercolor:设置框架集的边框颜色(英文或十六进制颜色)
  • frameborder:设置框架集边框是否显示,值只有0和1,0表示不显示边框,1表示显示边框
  • framespacing:设置框架集的边框厚度,单位像素
  • scrolling:设置是否在框架集中显示滚动条,取值:auto(需要时自动显示)、yes(始终显示)、no(从不显示)
  • noresize:设置无法调整框架集的大小,如果没有该属性,使用者可以随意拉动框架改变大小

5、框架frame标签属性

  • src:设置显示在框架<frame>中的网页文件URL路径
  • name:定义框架名称
  • frameborder:设置框架边框是否显示,值只有0和1,0表示不显示边框,1表示显示边框
  • scrolling:设置是否在框架中显示滚动条,取值:auto(需要时自动显示)、yes(始终显示)、no(从不显示)
  • noresize:设置无法调整框架的大小,如果没有该属性,使用者可以随意拉动框架改变大小
  • marginheight:设置框架的上方和下方的边距
  • marginwidth:设置框架的左侧和右侧的边距
  • longdesc:设置一个包含有关框架内容的长描述的页面

6、不支持框架标签<noframes>
虽然框架技术是一种比较早的一种技术,但是仍然有一些早期版本的浏览器不支持框架。使用<noframes>可以让浏览器不支持框架

iframe框架

1、定义
iframe元素会创建包含另外一个文档的内联框架(即行内框架)

2、HTML 与 XHTML 之间的差异
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素

3、提示与注解
可以把需要的文本放置在<iframe>和</iframe>之间,这样就可以应对无法理解iframe的浏览器
iframe标签是成对出现的,以<iframe>开始,</iframe>结束
iframe标签内的内容可以做为浏览器不支持iframe标签时显示

4、常用属性

  • src:定义在iframe中显示的文档的 URL
  • name:定义iframe的名称
  • frameborder:定义iframe边框是否显示,值只有0和1,0表示不显示边框,1表示显示边框
  • scrolling:定义是否在iframe中显示滚动条,取值:auto(需要时自动显示)、yes(始终显示)、no(从不显示)
  • marginheight:定义iframe的顶部和底部的边距
  • marginwidth:定义iframe的左侧和右侧的边距
  • longdesc:定义一个包含有关iframe的较长描述
  • align:对齐方式,已废弃,取值:top(顶部)、middle(居中)、bottom(底部)、left(左边)、right(右边)
  • height:定义iframe的高度
  • width:定义iframe宽度

5、使用示例

<iframe src="URL" width="20%" height="50%"></iframe>

frame和iframe总结

1、frame不能脱离frameset单独使用,iframe可以。
2、frame不能放在body中。
正确用法,如下可以正常显示:

<!--<body>-->
<frameset rows="50%,*">
    <frame name="frame1" src="test1.htm"/> 
    <frame name="frame2" src="test2.htm"/> 
</frameset>
<!--<body>-->

错误用法,如下不能正常显示:

<body>
<frameset rows="50%,*">
    <frame name="frame1" src="test1.htm"/> 
    <frame name="frame2" src="test2.htm"/> 
</frameset>
<body>

3、嵌套在frameset中的iframe必需放在body中。
正确用法,如下可以正常显示

<body>
    <frameset> 
        <iframe name="frame1" src="test1.htm"/> 
        <iframe name="frame2" src="test2.htm"/> 
    </frameset> 
</body>

错误用法,如下不能正常显示

<!--<body>-->
    <frameset> 
        <iframe name="frame1" src="test1.htm"/> 
        <iframe name="frame2" src="test2.htm"/> 
    </frameset> 
<!--</body>-->

4、不嵌套在frameSet中的iframe可以随意使用
如下都可以正常显示

<body>
    <iframe name="frame1" src="test1.htm"/> 
    <iframe name="frame2" src="test2.htm"/> 
</body>

<!--<body>-->
<iframe name="frame1" src="test1.htm"/> 
<iframe name="frame2" src="test2.htm"/> 
<!--</body>-->

5、frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制。
如下:

<!--<body>-->
<frameset rows="50%,*">
    <frame name="frame1" src="test1.htm"/> 
    <frame name="frame2" src="test2.htm"/> 
</frameset>
<!--</body>-->

<body>
<frameset>
    <iframe height="30%" name="frame1" src="test1.htm"/> 
    <iframe height="100" name="frame2" src="test2.htm"/> 
</frameset>
</body>

6、如果在同一个页面使用了两个以上的iframe,在IE中可以正常显示,在firefox中只能显示出第一个。使用两个以上的frame在IE和firefox中均可正常
7、frame是整个页面的框架,iframe是内嵌的网页元素,也可以说是内嵌的框架。
8、嵌套区别
iframe标记又叫浮动帧标记,可以用它将一个HTML文档嵌入在一个HTML中显示,iframe和frame最大区别是在网页中嵌入 的<iframe></iframe>所包含的内容与整个页面是一个整体,而<frame>< /frame>所包含的内容是一个独立的个体,是可以独立显示的

9、iframe可以放到表格里面,frame 则不行。

<table>
    <tr>
        <td><iframe id="" src=""></iframe></td>
    </tr>
</table>

10、iframe放在网页的任何地方,frame只能放到上下左右四个方向
11、frame用于全部页面,通常用在后台框架中,iframe只用于局部,比如需要嵌套一个百度地图页面等