知识大全 了解Frame、Iframe、Frameset 的区别
Posted 框架
篇首语：人们在诗中赞美鱼的自由，在餐桌上吃掉自由的鱼。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 了解Frame、Iframe、Frameset 的区别相关的知识，希望对你有一定的参考价值。
了解Frame、Iframe、Frameset 的区别 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！
框架页有Frame Iframe Frameset 个标记 初学者容易将三者混淆 下面分别讲解三者的区别
Frameset与Frame的区别首先讲解Frameset与Frame之间的区别
<Frameset></Frameset>用来划分框架 每一个框架由<Frame></Frame>标记 <Frame></Frame>必须在<Frameset></Frameset>之内使用 代码如下
<FRAMESET border= frameSpacing= borderColor=# d rows=* cols= *>
<FRAME src= inc/ name=left scrolling=no id= left >
<FRAME src= inc/ name=main scrolling= no >
</FRAMESET>
在上面的例子当中 <Frameset></Frameset>把页面分为左右两个部分 左侧框架中的页面是 右侧框架中的页面是
注意 <Frame></Frame>标记的框架顺序为从左至右或从上到下
两者的差别如下
● <Frameset>为框架标记 说明该网页文档为框架组成 并设定文档中组成框架集的框架的布局
● <Frame>用以设置组成框架集中各个框架的属性
Frameset参数设置<Frameset>需要设置一些特定的参数 这些参数直接决定了整个页面的布局 代码如下
<Frameset border= frameSpacing= borderColor=# d rows=* cols= *>
关于上段代码的各项参数设置及其含义如表 所示
表 Frameset参数
参 数
说 明
Border
设定框架的边框厚度 以pixels为单位
frameborder
设定是否显示框架的边框 为不显示 为显示
FrameSpacing
表示框架与框架之间的距离
BorderColor
设定框架的边框颜色
Row
将文档分为上下的框架 Row后的值可以为数值或百分数 *表示占用余下的空间 数值的个数代表水平分成的框架个数 例如Rows= * % 表示页面分为上中下三个框架页 上边的框架占用 px 下边的框架占用整个文档的 % 余下的空间为中间的框架占用 *是一个相对的概念 例如Row=* 表示页面中没有上下结构的框架布局
Cols
设置同Row
Frame参数设置关于Frame参数的设置 代码如下
<frame name= left src= index_manager/ marginwidth= marginheight= scrolling= no frameborder= noresize framespacing= bordercolor= #cc >
上段代码的各项参数设置及其含义如表 所示
表 Frame参数
参 数
说 明
Name
设定框架的名称 须为英文
Src
设置框架中显示的页面路径和名称 可为相对路径亦可为绝对路径
Marginwidth
表示框架距离左右边缘的距离
Marginheight
表示框架距离上下边缘的距离
Scrollling
设置是否在框架中显示滚动条 yes为显示 no为不显示 auto表示当框架页中内容超过框架的大小时自动显示滚动条
Frameborder
设置是否显示框架的边框 为不显示 为显示
Noresize
设定是否可以让使用者改变这个框架的大小 不设置此项可以让浏览者任意拉动框架 改变框架的大小
Framespacing
表示框架与框架之间的距离
Bordercolor
设定框架的边框颜色
Frame与Iframe的区别Frame与Iframe两者可以实现的功能基本相同 不过Iframe比Frame具有更多的灵活性
Iframe标记又叫浮动帧标记 可以用它将一个HTML文档嵌入在一个HTML中显示
它和Frame标记的最大区别是在网页中嵌入的<Iframe></Iframe>所包含的内容与整个页面是一个整体 而<Frame></Frame>所包含的内容是一个独立的个体 是可以独立显示的 另外 应用Iframe还可以在同一个页面中多次显示同一内容 而不必重复这段内容的代码
如图 所示的页面就是应用Iframe在页面上下各创建了分页的链接 上下的代码是一样的 只需在网页中嵌入同一个文件即可 不需要重复代码的编写 本案例的实际效果参看配书光盘中的案例/frame/iframe/see
设置Iframe透明Iframe还有一个更大的好处 就是可以设置框架透明 让框架内的背景和主页面背景一样 在上例操作中 细心的读者会发现这个问题 下面来详细说明如何设置Iframe透明 具体操作步骤如下
（ ）打开配书光盘中的案例/frame/iframe/see_
（ ）在浏览器中浏览该页文件 发现在插入Iframe的区域将原来单元格的背景覆蓋了 这不是想要的效果
（ ）打开页面 切换到代码视图 在<body>标记中插入代码如下
<body >
图 应用Iframe创建翻页
（ ）切换see_到代码视图
查看页面插入Iframe的单元格的代码如下
<td height= colspan= >
<iframe name= main width= % height= frameborder= border= scrolling= no marginwidth= marginheight= src= ></iframe>
</td>
（ ）在<Iframe>标记中 插入代码如下
allowTransparency= true
（ ）此时插入Iframe的单元格代码如下
<td height= colspan= >
<iframe name= main width= % height= frameborder= border= scrolling= no marginwidth= marginheight= src= allowTransparency= true ></iframe></td>
（ ）保存和see_两个页面 在浏览器中浏览效果
cha138/Article/program/net/201311/12920相关参考
JS判断网页是否在iframe或frame中 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 网上
了解网页中IFRAME框架挂马 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 安全工程师要能独立
了解ASP.NET中的IFRAME框架挂马 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 安全工
FrameSet左右收缩编码 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 主页面 <f
自动跳出Frame 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！ 有时侯你的
知识大全 js操纵跨frame的三级联动select下拉选项
运用HTMLCSS以及Javascript相关知识编写多窗口多菜单的内容联动考察学生关于frame浏览器对象以及表单控件的概念javascript事件触发机制和程序设计以及用CSS来组织文字展示的
知识大全 js中top/parent/frame概述及案例应用
引用方法top该变量永远指分割窗口最高层次的浏览器窗口如果计划从分割窗口的最高层次开始执行命令就可以用top变量parent该变量指的是包含当前分割窗口的父窗口如果在一个窗口内有分割窗口而在其中一个分
左边iframe放树目录右边的iframe放index页拖鼠标同时控制个iframe的宽高 期待有人能改进 操作方法鼠标指到个iframe中间可以水平拖纵向拖(控制高度) 缺点CSDN页面放
这篇文章介绍了js实现拉伸拖动iframe的具体代码有需要的朋友可以参考一下 左边iframe放树目录右边的iframe放index页拖鼠标同时控制个iframe的宽高期待有人能改进操作
遇到了操作iframe的相关问题其实就是在操作iframe内部某个窗体时调用父窗体的一个函数下面与大家分享下操作iframe兼容各种浏览器的方法 在做项目时遇到了操作iframe的相关问