html中的框架frameset和frame及iframe

Posted qiantao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html中的框架frameset和frame及iframe相关的知识，希望对你有一定的参考价值。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面，简而言之，就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。
使用框架的坏处：必须同时跟踪多个框架（网页或html文档），整个页面很难打印。

1、框架标签（Frame）

简单的三框架页面：

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

所有主流浏览器都支持 <frame> 标签。

标签定义及使用说明

<frame> 标签定义 <frameset> 中的子窗口（框架）。

<frameset> 中的每个 <frame> 都可以设置不同的属性，比如 border、scrolling, noresize 等等。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <frame> 标签，HTML 4.01 支持 <frame> 标签。

HTML 与 XHTML 之间的差异

在 HTML 中，<frame> 标签没有结束标签。在 XHTML 中，<frame> 标签必须被正确地关闭。

可选的属性

 

属性值描述
frameborder 0
1		 HTML5 不支持。规定是否显示框架周围的边框。
longdesc URL HTML5 不支持。规定一个包含有关框架内容的长描述的页面。
marginheight pixels HTML5 不支持。规定框架的上方和下方的边距。
marginwidth pixels HTML5 不支持。规定框架的左侧和右侧的边距。
name name HTML5 不支持。规定框架的名称。
noresize noresize HTML5 不支持。规定无法调整框架的大小。
scrolling yes
no
auto		 HTML5 不支持。规定是否在框架中显示滚动条。
src URL HTML5 不支持。规定在框架中显示的文档的 URL。

标准属性

在 HTML 4.01 中，<frame> 标签支持如下标准属性：

属性值描述
class classname 规定元素的类名
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式
title text 规定元素的额外信息

事件属性

根据 W3C 的标准，在 HTML 4.01 中，<frame> 标签不支持任何的事件属性。

但是，所有的浏览器都支持 onload 事件。

基本的注意事项 - 有用的提示

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

如何使用 <noframes> 标签

<html>

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

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

</html>

2、框架结构标签（<frameset>）

  • 框架结构标签（<frameset>）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

3、标签<iframe> 标签

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

格式

<iframe></iframe>

属性

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

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

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

width int：定义iframe的宽度；

height int：定义iframe的高度；

 

示例

<body>
<h3>HTML标签演示</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>
技术图片

注意事项

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

应用场景

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

4、frame,iframe,frameset之间的关系与区别

iframe 是在html页面内嵌入框架 框架内可以连接另一个页面，
如 
<html>
<head></head>
<body>
<iframe src="xxx.html"></iframe>
</body>
</html>

frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
<html>
<head></head>
<frameset>
<frame src=""></frame>
<frame src=""></frame>
</frameset>
</html>

frameset        它称为框架标记，是用来告知HTML文件是框架模式，并且设定可视窗口怎么分割
frame               它只是设定某一个框架窗口中的参数属性
iframe            它是在一个页面中嵌入一个框架窗口

 

frameset的属性

1、cols                     它是把整个画面竖向分割成几个画面
2、rows                   它是把整个画面横向分割成几个画面
3、frameborder       它表示设定这个框架的边框值。它的值只有两个0或者1.0表示不显示边框，1表示显示边框。
4、border                它表示了边框的宽度
5、bordercolor         它是设定了框架边框的颜色

 

frame的属性

1、src              指在此框架窗口中要显示的网页档案的链接
2、name             指这个框架窗口的名称
3、framespacing     指框架和框架之间保留的空白的距离
4、scrlling         指该框架窗口是否要显示滚动条
6、noresize         指框架的尺寸不能被随意拖动，改变大小  
7、marginheight      指框架顶部和底部边缘所保留的空间的大小
8、marginwidth      指框架左右两边边缘所保留的空间的大小。 

 

frameset和frame标签必须在一起使用

frame有一个重要的值是target，它表示在指定的框架中打开网页

而target有四个值

1、blank                它表示在一个新的窗口中打开链接网页

2、top                   它表示在本窗口中打开链接网页

3、parent              在上一层的框架中打开链接网页

4、self                   在超链接中打开链接网页

target是在编写导航时肯定会用到的

noframes              指当浏览器完全显示不出这个框架时，页面就会显示出<noframes></noframes>内的内容。

iframe的属性

1、name                  是框架窗口的名称
2、align                   是框架窗口中内容的对其方式
3、width                  是框架窗口的宽，单位是pixels
4、height               是框架窗口的长，单位是pixels
5、marginwidth      是插入的文件和框架左右边缘所保留的空间
6、marginheight     是插入的文件和框架上下边缘所保留的空间
7、frameborder      是指是否显示边框。1表示显示边框，0表示不显示边框
8、scrolling             是指是否允许使用滚动条。

 

利用frameset和frame可以把网页制作成所需要的不同大小的框架，可以用来布局。

iframe则是把一些网页嵌入到当前网页中，达到所需要的效果。

■ 框架概念 ： 
所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可，而所有框架标记需要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <BODY> 标记，浏览这框架必须读取这档 案而不是其它框窗的档案。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标 记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例： 
<frameset cols="50%,*"> 
<frame name="hello" src="up2u.html"> 
<frame name="hi" src="me2.html"> 
</frameset> 
此例中 <FRAMESET> 把画面分成左右两相等部分，左便是显示 up2u.html，右边则会显示 me2.html 这档案，<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。 

本节与 Composer 教室的【运用框架】大部分相同，只是本节增加了内容及较为详细，正 如其它篇章一样并不会提及网页制作工具，若阁下学会了 HTML 相信你亦不会选用 Composer ， FrontPage 一类的工具了。 

■ <FRAMESET> <FRAME> ： 

<FRAMESET> 称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。 
<FRAME> 则只是设定某一个框窗内的参数属性。 
<FRAMESET> 参数设定： 
例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> 

COLS="90,*" 
垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如COLS="30,*,50%" 可以 切成叁个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当 分配完第一及第叁个视窗後剩下的空间，第叁个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。 
ROWS="120,*" 
就是横向切割，将画面上下分开，数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 <FRAMESET> 标记中，因 Netacape 偶然不能显示这类形的框架，尽 采用多重分割。 
frameborder="0" 
设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避 免使用 yes 或 no ） 
border="0" 
设定框架的边框厚度，以 pixels 为单位。 
bordercolor="#008000" 
设定框架的边框颜色。颜色值请参考【调色原理】。 
framespacing="5" 
表示框架与框架间的保留空白的距离。 
<FRAME> 参数设定： 
例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF"> 

SRC="a.html" 
设定此框窗中要显示的网页档案名称，每个框窗一定要对应着一个网页档案。你可 使用绝对路径或相对路径，有关此两者详见於【连结进阶】 。 
NAME="top" 
设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。 
frameborder=0 
设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避 免使用 yes 或 no ） 
framespacing="6" 
表示框架与框架间的保留空白的距离。 
bordercolor="#008000" 
设定框架的边框颜色。颜色值请参考【HTML 剖析】。 
scrolling="Auto" 
设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。 
noresize 
设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随 意地拉动框架，改变其大小。 
marginhight=5 
表示框架高度部份边缘所保留的空间。 
marginwidth=5 
表示框架宽度部份边缘所保留的空间。 
以下是一些例子：（与 Composer 教室的【运用框架】相同） 

例子 HTML Code 
<frameset rows="80,*"> 
<frame name="top" src="a.html"> 
<frame name="bottom" src="b.html"> 
</frameset> 

例子 HTML Code 
<frameset rows="80,*,80"> 
<frame name="top" src="a.html"> 
<frame name="middle" src="b.html"> 
<frame name="bottom" src="c.html"> 
</frameset> 

例子 HTML Code 
<frameset cols="150,*"> 
<frameset rows="80,*"> 
<frame name="upper_left" src="a.html"> 
<frame name="lower_left" src="b.html"> 
</frameset> 
<frame name="right" src="c.html"> 
</frameset> 

例子 HTML Code 
<frameset rows="80,*"> 
<frame name="top" src="a.html"> 
<frameset cols="150,*"> 
<frame name="lower_left" src="b.html"> 
<frame name="lower_right" src="c.html"> 
</frameset> 
</frameset>

例子 HTML Code 
<frameset cols="150,*"> 
<frame name="left" src="a.html"> 
<frameset rows="80,*"> 
<frame name="upper_right" src="b.html"> 
<frame name="lower_right" src="c.html"> 
</frameset> 
</frameset> 

■ <NOFRAMES> ： 
当别人使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免 这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容，而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。 
应用方法： 
在<frameset> 标记范围加入 </NOFRAMES> 标记，以下是一个例子： 

<frameset rows="80,*"> 
<noframes> 
<body> 
很抱歉，阁下使用的浏览器不支援框架功能，请转用新的浏览器。 
</body> 
</noframes> 
<frame name="top" src="a.html"> 
<frame name="bottom" src="b.html"> 
</frameset> 
若浏览器支援框架，那麽它不会理会 <noframes> 中的东西，但若浏览器不支援框架，由 於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在 <noframes>范围内的文字会被显示。 

■ <IFRAME> ：  

这标记只适用於 IE(comet:也使用于FireFox)。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记，但围着的字句只有在浏览器不支援 iframe 标记时才会显示，如<noframes> 一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 javascript 会较好，若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。PS：一定要使用</iframe>关闭，否则后面的内容显示不出来。

<iframe> 的参数设定如下： 
例子： <iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>

src="iframe.html" 
欲显示於此框窗的文件来源除档案名称，必要加上相对或绝对路径。 
name="test" 
此框窗名称，这是连结标记的 target 参数所需要的， 
align="MIDDLE" 
可选值为 left, right, top, middle, bottom，作用不大 
width="300" height="100" 
框窗的宽及长，以 pixels 为单位。 
marginwidth="1" marginheight="1" 
该插入的文件与框边所保留的空间。 
frameborder="1" 
使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no） 
scrolling="Yes" 
使用 Yes 表示容许卷动（内定）， No 则不容许卷动

 

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>

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中均可正常

以上代码在IE7和firefox2.0中测试。

另外相关论坛窃取总结 :-)
1Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。
frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架

Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体，而<Frame></Frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。

2iframe 可以放到表格里面。frame 则不行。
<table>
<tr>
<td><iframe id="" src=""></iframe></td><td></td>
</tr>
</table>

3frame必须在frameset里
而frameset不能与body元素共存，也就说有frameset元素的文档只能是一个框架集，不能有别的东东

4IFrame是放在网业的什么地方都行  
  但是frame只能放到上下左右四个方向

5iframme   是活动帧  
  而frame是非活动帧  
  iframe使用方法如下  
  <iframe   scr="sourcefile"   frameborder=0   width="width"   height="height"></iframe>
iframe用起来更灵活，不需要frame那么多讲究  
而且放的位置也可以自己设
iframe是内嵌的，比较灵活，不过也有不好的地方，就是位置在不同的浏览器和分辨率下有可能不同，有时会把本来好好的页面搞得变形

iframe就没有这个限制

6iframe   可以加在网页中任何一个地方。  
  而frame   通常做框架页
iframe是一个网页中的子框架,两网页间是父子关系  
   
  frame是框架,由多个并列的网页构成
楼上的说得对，iframe是浮动的。就像是浮动面板，而frame是固定的。只能四个方向上的。  
你可以直接在网页里用一下，看看效果就行了。


7<iframe>是被嵌入在网页的元素，而<frame>用于组成一个页面的多个框架！
iframe   更利于版面的设计  
  frame     一条直一条竖的不美观
frame的那一条线也可以去掉的呦！只不过，iframe更方便对其进行数据的交换吧！
iframe可以放置到你想放的任意位置,控制起来比frame方便

8iframe是内部帧，可以嵌在一个页面里面，设置内部帧的属性可以使得整体看上去象一个完整的页面，而不是由多个页面组成，frame有frame的好处，比如何多网站，上面放广告条，左边放菜单，右边放内容，这样上边和左边的内容都可不动，只刷新右边页面的内容，选择iframe还是frame完全看自己的需求。

说白了，用IFrame比用Frame少一个文件（FrameSet），但支持Frame的浏览器比较多。

我为我公司做的网站，整个是用了iframe，linux带的浏览器都不支持，哎呀，丑呀，不过我还是喜欢用iframe

还有iframe可以放在表格里,然后ifame设置成width=100%   height=100%  
  我就可以只需修改我的表格的宽度和高度,这样的话有利于排版

其实Frame是一个控件  
  使用方法和Panle相同。

frame是把网页分成多个页面的页面。它要有一个框架集页面frameset  
  iframe是一个浮动的框架,就是在你的页面里再加上一个页面,

<frame>用来把页面横着或竖着切开，  
  <iframe>用来在页面中插入一个矩形的小窗口

Frame一般用来设置页面布局,将整个页面分成规则的几块,每一块里面包含一个新页面.  
  iframe用来在页面的任何地方插入一个新的页面.  
   
  因此,Frame用来控制页面格式,比如一本书,左边是章节目录,右边是正文,正文很长,看的时候要拖动,但又不想目录也被拖动得开不到了.因此最好将页面用Frame分成规则的2页,一左一右.  
   
  而iframe则更灵活,不要求将整个页面划分,你可以在页面任何地方用iframe嵌入新的页面.

我个人认为:  
  <frame>用于全页面  
  <iframe>只用于局部 

以上是关于html中的框架frameset和frame及iframe的主要内容，如果未能解决你的问题，请参考以下文章

Html中的frame属性的详尽使用方法。

iframe与frameset有啥区别

<frameset>框架如何整体刷新，不管有多少列

frame与iframe的区别及基本用法

frame与iframe的区别及基本用法

html5对frameset不支持，那么如下面的框架应该怎么替换呢