浅谈Iframe和FRAME的区别



一、Iframe标记的使用 

Frame标记即帧标记，我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 

Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。 
Iframe标记的使用格式是: 

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe> 
src：文件的路径，既可是HTML文件，也可以是文本、ASP等； 
width、height："画中画"区域的宽与高； 
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; 
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0

Frame 对象

Frame 对象代表一个 HTML 框架。

在 HTML 文档中 <frame> 每出现一次，就会创建一个 Frame对象。

Frame 对象的属性

属性

描述

contentDocument

容纳框架的内容的文档。

frameBorder

设置或返回是否显示框架周围的边框。

id

设置或返回框架的 id。

longDesc

设置或返回指向包含框架内容描述文档的 URL。

marginHeight

设置或返回框架的顶部和底部页空白。

marginWidth

设置或返回框架的左边缘和右边缘的空白。

name

设置或返回框架的名称。

noResize

设置或返回框架是否可调整大小。

scrolling

设置或返回框架是否可拥有滚动条。

src

设置或返回应被加载到框架中的文档的 URL。

标准属性

属性

描述

className

设置或返回元素的 class 属性。

dir

设置或返回文本的方向。

lang

设置或返回元素的语言代码。

title

设置或返回元素的 title 属性。

 

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> 

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只能放到上下左右四个方向 

5。iframme   是活动帧   
  而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可以放在表格里,然后ifame设置成width=100%   height=100%   
  我就可以只需修改我的表格的宽度和高度,这样的话有利于排版  

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

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

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

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

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

除了对搜索引擎不友好外，还有什么明显的缺陷吗？

 

目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了。减少框架也可以减少出现XXS等问题。减少框架也可以减少一定请求。

但是有一些情况是必须使用框架，例如想把页面的JS独立隔离或者使用框架做一些跨域的Ajax请求。 例如腾讯微博，他通过框架代理，使所有Ajax请求Referer进行统一，既方便CRSF的控制也可以做到跨域的效果。例如腾讯微博的：http://message.t.qq.com/proxy.html 文件，他就是通过框架来实现跨域操作。

又例如在非HTML5的环境下要做到无刷新上传也可以通过框架构造一个上传文件环境。当然这个也可以用Flash代替。

 

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

 

方便制作导航栏

框架的缺点

会产生很多页面，不容易管理

不容易打印

浏览器的后退按钮无效

代码复杂,无法被一些搜索引擎索引到

多数小型的移动设备（PDA 手机）无法完全显示框架

多框架的页面会增加服务器的http请求

 

iframe高度控制很不方便，需要使用各种HACK，除非确定开发的是GReader之类的玩意；

想要用模态对话框时位置与遮罩都很烦，除非我就不打算用fixed的库了。

然后，看到GR之类的似乎也没用iframe的样子，就不考虑在这方面做太多尝试了…

frameset相关属性介绍

border 设置框架的边框粗细。

bordercolor 设置框架的边框颜色。

frameborder 设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

cols

纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“”表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面25%，中间横向宽度为200像素，页面余下的作为右面部分。

rows 横向分割页面。数值表示方法与意义与cols相同。

framespacing 设置框架与框架间的保留的空白距离。

 

posted @ 2016-08-14 20:35  nostic  阅读(396)  评论(0)  编辑  收藏  举报