`
lt200819
  • 浏览: 188086 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

 

原文出处:http://www.cnblogs.com/wennxxin/archive/2008/10/11/1308516.html

■ 框架概念 ： 
所谓框架便是网页画面分成几个框窗，同时取得多个 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="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>

src="iframe.html" 
欲显示於此框窗的文件来源除档案名称，必要加上相对或绝对路径。 
name="test" 
此框窗名称，这是连结标记的 target 参数所需要的， 
align="center" 
可选值为 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>

6、如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个；使用两个以上的frame在IE和firefox中均可正常

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

 

分享到：
| ubuntu如何安装和卸载软件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    frame,iframe.frameset用法和区别

    - **&lt;IFRAME&gt;**: 与 `&lt;FRAME&gt;` 类似，但 `&lt;IFRAME&gt;` 可以独立于框架集存在，更灵活，常用于嵌入小块内容或者动态加载内容。 - ****: 当用户的浏览器不支持框架时，`&lt;NOFRAMES&gt;` 内的内容将作为替代显示。 ### 框架...

    frame,iframe,frameset用法和区别

    `&lt;iframe&gt;`，即“内联框架”，与`frame`类似，但可以独立于`frameset`存在。它可以在网页的任何地方插入一个子窗口，可以用来加载广告、地图、第三方内容等。`iframe`的属性有： - `src`: 与`frame`一样，指定要加载...

    frameset/frame/iframe实例演示

    里面包含了frameset，frame以及iframe的一些技术的演练，希望对大家有帮助，如果有什么补充或疑问，可以加QQ374053115进行和我讨论交流，互相进步！里面代码均手写，大致功能都已经实现，如果错误欢迎指出！

    frame,iframe,frameset区别pdf

    接下来，我们将详细讨论frame、iframe和frameset的区别和用法。 **Frame** Frame标签已经不再被推荐使用，因为它已从HTML5标准中废弃。在早期的HTML版本中，frame标签用于定义一个框架，让页面的一部分可以加载另...

    js 操作 frameset frame iframe对象

    JS 操作 Frameset、Frame、Iframe 对象可以实现框架之间的互相访问和控制。 Frameset 对象 Frameset 对象是 HTML 中的框架集，它可以包含多个 Frame 对象。Frameset 对象可以通过 `window.frames` 属性来访问，...

    FRAME与IFRAME的使用方法与区别

    ### FRAME与IFRAME的使用方法与区别 #### 框架的基本概念 在Web开发领域，`FRAME`与`IFRAME`都是用来展示多个文档的容器元素，但它们的工作方式有所不同。`FRAME`是一种早期的技术，它允许开发者在一个HTML页面中...

    页面布局frameset frame

    在网页设计领域，页面布局是至关重要的，它决定了用户如何与网站进行交互...然而，在某些特定场景下，frameset和frame仍然有用武之地，尤其是对于需要维护旧系统或者实现特定功能（如导航栏和内容区分离）的网页设计。

    frame frameset左右收缩

    对于"frame frameset左右收缩"和"iframe左右收缩"，这可能是指在设计网页布局时，希望对这些框架进行自适应调整，使得它们能够根据浏览器窗口的宽度动态改变宽度，以实现响应式设计。这通常需要结合CSS（层叠样式表...

    Iframe FrameSet top 内嵌示例

    页面框架内嵌示例,通过IFRAME与FRAMESET内嵌后不会出现滚动条的问题，以及top跳出框架的问题

    iframe与frame的区别

    在HTML页面设计中，`iframe`和`frame`都是用于创建多窗口或分割页面的元素，但它们之间存在显著的差异。理解这些区别对于优化网页布局和用户体验至关重要。 首先，`frame`是HTML4标准的一部分，它通过`&lt;frameset&gt;`...

    frame与frame之间如何用JavaScript传值

    本文将详细讲解如何使用JavaScript在frame与frame之间进行值的传递。 首先，了解基本概念。`window`对象是浏览器的全局对象，它提供了对浏览器窗口的各种控制，包括访问框架。`frames`属性是`window`对象的一个成员...

    html Frame、Iframe、Frameset 的区别

    1. **Frameset与Frame的区别** - `&lt;Frameset&gt;` 标签是用来定义框架集的，它决定了页面的分割方式。你可以通过`rows`和`cols`属性来设置框架的行数和列数，从而划分出多个框架。例如，`&lt;Frameset rows="*,180,*"&gt;`会...

    以div代替frameset，用css实现仿框架布局

    总的来说，通过熟练运用`div`和CSS，我们可以创建出与`frameset`类似甚至更灵活的布局，同时避免了`frameset`带来的问题。这要求开发者具备良好的CSS理解和实践能力，以便根据具体需求调整和优化布局。在现代Web开发...

    对frameset、frame、iframe的js操作.pdf

    本文主要探讨了如何使用JavaScript来操作HTML中的frameset、frame和iframe元素，这些元素在构建多页面布局和实现页面间交互时非常常见。在HTML中，frameset定义了一个框架集，而frame和iframe则用于嵌入单独的HTML...

    frame,iframe,中的js的相互访问示例

    1. **frame与iframe的区别** - `frame`是HTML4中的元素，它被用作`frameset`的一部分，用来分割窗口或框架。而`iframe`是独立的窗口，可以嵌入到任何HTML文档中，它是HTML5引入的新特性。 - `frame`不支持响应式...

    frameset父页面和子页面的方法之间调用个属性的调用（页面上可以包含iframe）

    当一个`frameset`中有多个`frame`或`iframe`时，它们之间可能需要进行数据交换或操作交互。这种交互可以通过JavaScript来实现，因为JavaScript提供了一些API来操作和访问页面中的DOM元素以及与之关联的函数。 1. `...

    多个iframe，显示其中一个frame中的div，并处于最上层显示

    接下来，我们要考虑如何在多个`iframe`之间通信。这可以通过JavaScript实现，尤其是使用`window.postMessage`方法。此方法允许来自不同源的脚本通过`postMessage`发送安全的数据。发送端使用`targetOrigin`参数指定...

    IFrame中Session丢失的解决办法

    这种结构可能导致Session信息在IFrame与其父窗口或同一页面中的其他IFrame之间无法正确共享或识别。 ### Session丢失的原因 Session丢失在IFrame环境中的主要原因是浏览器的同源策略和Cookie管理机制。同源策略...

    frame之间以及子页面和父页面间参数传递

    ### Frame之间及子页面与父页面间的参数传递 在Web开发中，特别是在使用JSP（Java Server Pages）技术时，经常需要实现不同`frame`之间的数据交互或子页面与父页面之间的参数传递。这种功能在实际应用中非常常见，...

Magicbox
Global site tag (gtag.js) - Google Analytics