星之码-前端开发-frame和iframe框架

844 05-11

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、使用示例

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只用于局部，比如需要嵌套一个百度地图页面等

————————————————

智一面|前端面试必备练习题

标签： HTML