`

Frame、Iframe、Frameset 的区别

 
阅读更多

10.4  Frame、Iframe、Frameset 的区别

框架页有Frame、Iframe、Frameset 3个标记，初学者容易将三者混淆，下面分别讲解三者的区别。

10.4.1  Frameset与Frame的区别

首先讲解Frameset与Frame之间的区别。

<Frameset></Frameset>用来划分框架，每一个框架 由<Frame></Frame>标记。<Frame></Frame>必须 在<Frameset></Frameset>之内使用，代码如下：

 

<html>

<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>

</html>

 

在上面的例子当中，<Frameset></Frameset>把页面分为左右两个部分，左侧框架中的页面是admin_left.htm，右侧框架中的页面是admin_center.htm。

注意：<Frame></Frame>标记的框架顺序为从左至右或从上到下。

两者的差别如下：

  ● <Frameset>为框架标记，说明该网页文档为框架组成，并设定文档中组成框架集的框架的布局。

  ● <Frame>用以设置组成框架集中各个框架的属性。

10.4.2  Frameset参数设置

<Frameset>需要设置一些特定的参数，这些参数直接决定了整个页面的布局，代码如下：

<Frameset border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*>

 

关于上段代码的各项参数设置及其含义如表10.3所示。

表10.3  Frameset参数

参    数

说    明

Border

设定框架的边框厚度，以pixels为单位

frameborder

设定是否显示框架的边框，0为不显示，1为显示

FrameSpacing

表示框架与框架之间的距离

BorderColor

设定框架的边框颜色

Row

将文档分为上下的框架，Row后的值可以为数值或百分数，*表示占用余下的空间，数值的个数代表水平分成的框架个数，例如 Rows=“210,*,10%”，表示页面分为上中下三个框架页，上边的框架占用210px，下边的框架占用整个文档的10%，余下的空间为中间的框架 占用。*是一个相对的概念，例如Row=*，表示页面中没有上下结构的框架布局

Cols

设置同Row

10.4.3  Frame参数设置

关于Frame参数的设置，代码如下：

<frame name="left" src=" index_manager/admin_left.htm " marginwidth="1" marginheight="1" scrolling="no" frameborder="1" noresize framespacing="2" bordercolor="#cc0000">

 

上段代码的各项参数设置及其含义如表10.4所示。

表10.4  Frame参数

参    数

说    明

Name

设定框架的名称，须为英文

Src

设置框架中显示的页面路径和名称，可为相对路径亦可为绝对路径

Marginwidth

表示框架距离左右边缘的距离

Marginheight

表示框架距离上下边缘的距离

Scrollling

设置是否在框架中显示滚动条，yes为显示，no为不显示，auto表示当框架页中内容超过框架的大小时自动显示滚动条

Frameborder

设置是否显示框架的边框，0为不显示，1为显示

Noresize

设定是否可以让使用者改变这个框架的大小，不设置此项可以让浏览者任意拉动框架，改变框架的大小

Framespacing

表示框架与框架之间的距离

Bordercolor

设定框架的边框颜色

10.4.4  Frame与Iframe的区别

Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。

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

如图10.21所示的页面就是应用Iframe在页面上下各创建了分页的链接，上下的代码是一样的，只需在网 页中嵌入同一个文件即可，不需要重复代码的编写，本案例的实际效果参看配书光盘中的案例/frame/iframe /see_infomore_iframe.htm。

10.4.5  设置Iframe透明

Iframe还有一个更大的好处，就是可以设置框架透明，让框架内的背景和主页面背景一样。在上例操作中，细心的读者会发现这个问题，下面来详细说明如何设置Iframe透明。具体操作步骤如下：

（1）打开配书光盘中的案例/frame/iframe/see_infomore_iframe1.htm。

（2）在浏览器中浏览该页文件，发现在插入Iframe的区域将原来单元格的背景覆盖了，这不是想要的效果。

（3）打开page.htm页面，切换到代码视图，在<body>标记中插入代码如下：

<body style="background-color=transparent">

图10.21  应用Iframe创建翻页

（4）切换see_infomore_iframe1.htm到代码视图，查看页面插入Iframe的单元格的代码如下：

<td height="30" colspan="4" >

<iframe name="main"  width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm"></iframe>

</td>

（5）在<Iframe>标记中，插入代码如下：

allowTransparency="true"

（6）此时插入Iframe的单元格代码如下：

<td height="30" colspan="4" >

<iframe name="main"  width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>

（7）保存page.htm和see_infomore_iframe1.htm两个页面，在浏览器中浏览效果。

 

10.5  本章 小结

使用框架可以将浏览器分成不同的窗口，通过框架 之间建立链接，达到网站风格的统一。本章主要介绍了如何创建框架，以及框架的属性以及Frame、Iframe、Frameset之间的区别，应用 Noframe还可以有效地对页面进行优化，从而使得搜索引擎能够正确索引框架网页上的内容信息，突破了框架的网页无法被搜索引擎正确索引的限制。

在模板没有出现之前，框架占了主流。应用框架可建立快速链接，加速了网站的浏览速度，提高了浏览者的使用效率，正因为这个优势，框架页被广泛应用于导航。

分享到：
| java的debug和release编译方式，以及在sp ...
评论
发表评论

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

相关推荐

    frame,iframe,frameset区别pdf

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

    frame,iframe.frameset用法和区别

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

    frame,iframe,frameset用法和区别

    - `frame`只能在`frameset`中使用，而`iframe`可以单独使用，更灵活。 - `frame`的布局固定，不能单独调整大小，`iframe`可以。 - `frameset`适用于整个页面的框架布局，`iframe`更适合局部内容的嵌入。 - `iframe`...

    frameset/frame/iframe实例演示

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

    js 操作 frameset frame iframe对象

    JS 操作 Frameset、Frame、Iframe 对象 Frameset、Frame、Iframe 是 HTML 中的框架编程概念，它们可以将一个 HTML 页面分割成多个独立的区域，每个区域可以显示一个独立的 HTML 页面。JS 操作 Frameset、Frame、...

    FRAME与IFRAME的使用方法与区别

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

    Iframe FrameSet top 内嵌示例

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

    frame frameset左右收缩

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

    页面布局frameset frame

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

    html Frame、Iframe、Frameset 的区别

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

    iframe与frame的区别

    在选择使用`frame`还是`iframe`时，需要考虑兼容性问题，因为`frame`在一些现代浏览器中可能不被支持，而`iframe`则更为通用。同时，搜索引擎优化（SEO）也是需要考虑的因素，`frame`中的内容可能不容易被搜索引擎...

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

    如果需要实现类似`frameset`的交互效果，可以结合`div`和`iframe`一起使用。 总的来说，通过熟练运用`div`和CSS，我们可以创建出与`frameset`类似甚至更灵活的布局，同时避免了`frameset`带来的问题。这要求开发者...

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

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

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

    总结来说，实现"多个iframe，显示其中一个frame中的div，并处于最上层显示"的功能，涉及了HTML的`iframe`标签、CSS的`z-index`属性、JavaScript的`postMessage`通信以及动态创建和操作DOM元素的技巧。通过这些技术，...

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

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

    对frameset、frame、iframe的js操作示例代码

    在网页开发中，`frameset`、`frame`和`iframe`是用于创建网页布局的框架元素，允许在一个页面中嵌套多个独立的HTML文档。本文将深入探讨这些元素的JavaScript操作，特别是如何进行框架间的数据交换和交互。 首先，`...

    frame 的 parent 是谁？

    在框架结构中，如果一个`frame`嵌套在另一个`frame`或者`frameset`中，那么内层`frame`的`parent`就是外层`frame`或`frameset`。例如，如果我们在`leftFrame`中有一个JavaScript脚本，我们可以使用`window.parent`来...

    IFrame中Session丢失的解决办法

    然而，在IFrame（Inline Frame）环境中，Session的管理变得复杂，因为IFrame本质上是一个嵌入到主页面中的子窗口或框架，它可以加载来自不同源的网页。这种结构可能导致Session信息在IFrame与其父窗口或同一页面中的...

    dom网页frame枚举

    Frame通常由`&lt;frameset&gt;`、`&lt;frame&gt;`标签组成，而Iframe则使用`&lt;iframe&gt;`标签。 1. DOM遍历Frame和Iframe： 当一个网页包含frame或iframe时，这些嵌入的页面会成为主页面的子文档，并且在DOM树中占有一席之地。...

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