HTML之FrameSet,Frame和Iframe区别

本文主要是介绍HTML之FrameSet,Frame和Iframe区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

1 HTML之Frame框架
- 1.1 各个介绍
- - 1.1.1 Frameset
  - 1.1.2 Frame
  - 1.1.3 Iframe
- 1.2 区别
- - 1.2.1 Frameset与Frame的区别
  - 1.2.2 Frame与Iframe的区别
  - - 1.2.2.1 两者大致区别
    - 1.2.2.2 放置位置区别
    - 1.2.2.3 高度控制区别
    - 1.2.2.4 放置表格
- 1.3 综合示例

1 HTML之Frame框架

frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。
frame知识点包括（frameset标签、frame标签、iframe标签）

1.1 各个介绍

1.1.1 Frameset

属性
border:设置框架的边框粗细
bordercolor:设置框架的边框颜色
frameborder:设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框
cols:纵向分割页面。其数值表示方法有三种：30%、30（或者30px）、*；数值的个数代表分成的视窗数目且数值之间用,隔开。30%表示该框架区域占全部浏览器页面区域的30%；30表示该区域横向宽度为30像素；*表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
rows:横向分割页面。数值表示方法与意义与cols相同。
framespacing:设置框架与框架间的保留的空白距离。
用例

<frameset cols="213,*" frameborder="no" border="0" framespacing="0">

注意1：
cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构，代码正确写法为：

<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0"><frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/><frameset cols="213,*" frameborder="no" border="0" framespacing="0"><frame src="???" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/><frame src="???" name="mainFrame" id="mainFrame"/>

【即，若想即使用cols又使用rows，可利用frameset嵌套实现】
注意2：
<frameset cols="40%,*,*">意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
<frameset cols="*,*,*,*">:意思是：浏览器窗口等分为四部分。

1.1.2 Frame

属性
name:设置框架名称。此为必须设置的属性。
src:设置此框架要显示的网页名称或路径。此为必须设置的属性。
scrolling:设置是否要显示滚动条。设定值为auto, yes, no
bordercolor:设置框架的边框颜色。
frameborder:设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
noresize:设置框架大小是否能手动调节。
marginwidth:设置框架边界和其中内容之间的宽度。
marginhight:设置框架边界和其中内容之间的高度。
width:设置框架宽度。
height:设置框架高度。
framespacing:设置框架与框架间的保留的空白距离。
用例

<frame src="???" 
name="topFrame" 
scrolling="No" 
noresize="noresize" 
marginwidth="10" 
marginhight="10" 
width="400" 
height="800" />

1.1.3 Iframe

Iframe是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）

属性
align:设置垂直或水平对齐方式
allowTransparency:设置或获取对象是否可为透明。
用例

<iframe name="123" 
align="middle" 
marginwidth="0" 
marginheight=0 
src="???" frameborder="0" 
scrolling="no" width="776" 
height="2500"></iframe>

注意：
iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外

1.2 区别

1.2.1 Frameset与Frame的区别

首先讲解Frameset与Frame之间的区别
<Frameset></Frameset>用来划分框架，每一个框架由<Frame></Frame>标记。<Frame></Frame>必须在<Frameset></Frameset>之内使用
代码如下：

<FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>
<FRAME src="inc/admin_left.htm" name=left scrolling=no id="left">
<FRAME src="inc/admin_center.htm" name=main scrolling="no">
</FRAMESET>

在上面的例子当中，<Frameset></Frameset>把页面分为左右两个部分，左侧框架中的页面是admin_left.htm，右侧框架中的页面是admin_center.htm。
注意：<Frame></Frame>标记的框架顺序为从左至右或从上到下。

两者的差别如下：

<Frameset>为框架标记，说明该网页文档为框架组成，并设定文档中组成框架集的框架的布局。
<Frame>用以设置组成框架集中各个框架的属性。

1.2.2 Frame与Iframe的区别

1.2.2.1 两者大致区别

Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性
frame不能脱离frameSet单独使用，iframe可以
Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体，而<Frame></Frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。
iframe用起来更灵活，不需要frame那么多讲究
而且放的位置也可以自己设，iframe是内嵌的，比较灵活，不过也有不好的地方，就是位置在不同的浏览器和分辨率下有可能不同，有时会把本来好好的页面搞得变形

1.2.2.2 放置位置区别

frameset不能放在body中；如下可以正常显示：

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

嵌套在frameSet中的iframe必需放在body中；如下可以正常显示：

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

不嵌套在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>-->

1.2.2.3 高度控制区别

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>

1.2.2.4 放置表格

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

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

1.3 综合示例

<html>
<head>
<title>综合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>对不起，您的浏览器不支持“框架”！</p>
</body>
</noframes>
</frameset>
</html>