视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Iframe和FRAME的区别分析
2020-11-27 14:45:28 责编:小采
文档


一、Iframe标记的使用
提起Iframe,可能你早已将之扔到“被遗忘的角落”了,不过,说起其兄弟Frame就不会陌生了。Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个“上一节“、“下一节“的链接,除了每节教程内容不同之外,页面其它部分内容都是相同的,如果一页一页地做笨页面,这似乎太让人厌烦了,这时突发奇想,如果有一种方法让页面其它地方不变,只将教程做成一页一页的内容页,不含其它内容,在点击上下翻页链接时,只改变教程内容部分,其它保持不变,这样,一是省时,另则以后如教程有个三长两短的变动,也很方便,不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。
Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,一个形象的比喻即“画中画“电视。
现在我们谈一下Iframe标记的使用。
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。
比如:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
二、父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。
现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用:
document.myH1.innerText="hello,my dear"(其中,document可省)
在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。
如example.htm:
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:
parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中,但它保持相对的,是一个“王国“哟,在单一HTML中的特性同样适用于浮动帧中。
试想一下,通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,这有点象程序设计中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了。
有一点要注意,Nestscape浏览器不支持Iframe标记,但在时下IE的天下,这似乎也无大碍,广泛采用Iframe标记,既为自己(网站)着了想,又为网友节省了网费,何乐而不为?
浮动FRAME是HTML4.0规范中的一个定义,目前的浏览器都支持它。
不象FRAMESET表示的分割区样子,一个浮动FRAME作为一个内置对象存在于Web页面上,其样式就象一个页面上的一个图形或者一个applet。浮动FRAME使用<IFRAME>标记,它具有与<FRAME>相同的大多数属性设置,包括:name、src、marginwidth、marginheight、FRAMEborder以及scrolling。同时,它还具有与图形或者applet一样的height、width和align属性。
而且,浮动FRAME遵循与普通FRAME一样的target原则:我们可以通过它的name来指向它。本原则适用于在任一类型FRAME中的浮动FRAME,反之易然。浮动FRAME中的没有traget的链接指向它本身,而_parent链接则指向包含<IFRAME>的文档所在的FRAME或者窗口。比如:
<IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left>
<IMG src="Images/noFRAME.gif" alt="You can't see the floating FRAME"
width=150 height=200 hspace=10 align=right>
</IFRAME><BR>
<A href="one.htm" target="floater">Show one.htm</A><P>
<A href="two.htm" target="floater">Show two.htm</A><P>
<A href="start.htm" target="floater">Bring back start.htm</A>
注意,对应支持<IFRAME>标记的浏览器,任何位于<IFRAME>和</IFRAME>间的内容都将忽略。反之,其中的内容将显示出来,这可以用作解释当前浏览器不支持<IFRAME>

下载本文
显示全文
专题