当前位置: 首页 > 工具软件 > xian frame > 使用案例 >

Frame的应用

蔡明贤
2023-12-01

Frame的应用

 

框架相当于<body>,所以一个存在框架的html文件是不存在body的。

框架的作用就是划分屏幕,使界面尽可能少地实现刷新。最基本的应用就是菜单内容界面。

1、  框架的创建

<frameSet rows=”20%,*” id=”frameset_id”>

<frame name=”1” src=1.htm>

<frameSet name=”2” cols=”*,3*”>

    <frame name=”2-1” src=2_1.htm>

    <frame name=”2-2” src=2_2.htm>

</frameSet>

</frameSet>

       注:1)框架可以嵌套;2)框架划分可采用百分之、比例、像素为单位。Cols=”*,3*”就是把屏幕划分成四等分。

2、  框架的格式

框架分割处有一条线?<frameSet frameborder=0>消除之(或<frame frameBorder=0)。

不对呀,颜色还是有问题?<frameSet frameborder=0 frameSpacing=0>

不想让用户调节调架大小?noResize就行了。

想让框架分割线具有颜色?borderColor就行了。

想要卷滚条?scrolling=yes/no/auto

3、  如何从一个框架修改另一框架?

很简单,例如<a href=”b.htm” target=1>XXX</a>就是在框架1中显示b.htm的内容。

当然也,也可以直接调用:如在javaScript中调用:frameset_id.1.location.href=”b.htm”

以下是四种比较特殊的方法:

<a href=url target=_blank> 新窗口中打开,相当于window.open

<a href=url target=_self> 本窗口打开,相当于window.location.href

<a href=url target=_parent> 父窗口打开,相当于parent.location.href

<a href=url target=_top> 整个浏览器窗口打开。

4、  浮动窗口iframe

frame差不多用法。

例如:

IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left

slafjsalgjakg;al

</iframe>

可以试试。

5、  编程操作

frame既可以通过名称来调用,也可以通过索引号来调用。如:

下面举例说明,假设一个FRAMESET包含3个同样的FRAME,都位于窗口下部: 

 

FRAMESET rows="60%,40%"

FRAME name="link" src="link.htm"

FRAMESET cols="*,*,*"

  FRAME name="blank1" src="blank.htm"

  FRAME name="blank2" src="blank.htm"

  FRAME name="blank3" src="blank.htm"

/FRAMESET

/FRAMESET 

  第一个FRAME中的文档叫做link.htm,使用点击其中的单一链接就可以修改其他三个FRAME中的内容。实现代码如下: 

a href="javascript:navAll()">修改下面3FRAME的内容</a

SCRIPT language="javascript"><!--

function navAll() {

parent.FRAMEs[1].location.href="red.htm";

parent.FRAMEs[2].location.href="blue.htm";

parent.FRAMEs[3].location.href="white.htm"; }

// --></SCRIPT

 

以下来自某个网站。

用脚本控制动态FRAME 

 

  如果FRAME中变化的内容不多,就可以考虑使用脚本程序动态生成其内容。这样就不用再创建单独的小HTML页面,无需从服务器上下载。创建内容的方法与在任何窗口中书写内容一样,都是通过document对象。 

 

  举个例子说明一下。假设要在一个FRAME内显示小组成员的相片,并在其下的一个小FRAME内显示该成员的名字等信息。首先建立信息数组: 

 

empID = new Array();

empID[0] = 'Dana Corolla, CEO';

empID[1] = 'Arturo Montero, senior editor';

empID[2] = 'Percy Tercel, head designer';

empID[3] = 'Angus Coupedeville, astrologer'; 

 

 

  然后,建立小组成员照片的图形地图,将每个<AREA>链接到函数showMe(n),由它负责根据索引数据创建信息: 

 

part1 = 'HTML><HEAD></HEAD';

part1+= 'BODY bgcolor=#ffffff><DIV align=center';

part2 = '/DIV></BODY></HTML'; 

 

function showMe(n) {

parent.FRAMEs[1].document.open();

parent.FRAMEs[1].document.write(part1);

parent.FRAMEs[1].document.write(empID[n]);

parent.FRAMEs[1].document.writeln(part2);

parent.FRAMEs[1].close();

} 

 

  FRAME间的脚本控制 

 

  使用javascript,我们既可以从创建窗口的页面访问那个窗口,也可以从这个窗口创建的窗口访问它。另一方面,FRAMESET中的文档(包括FRAMESET本身)总是可以访问和操纵其中每个的javascript函数和变量。比如说,第三个FRAME中有函数sayGobble(vol),那么在其他FRAME中就可以使用parent.FRAMEs[2].sayGobble(vol)来引用它。同样,FRAMESET页面中的变量myName可以被任何FRAMEparent.myName="Imelda"的命令进行设置。 

 

  不管在其他FRAME中的内容如何,在静态FRAME或者FRAMESET中的函数和变量始终保持可用。这个特征非常有价值,不仅可以将通用函数保存在其中从而压缩代码,而且,还可以实现页面间转换时的状态保持。 

 

  下面的FRAMESET页面只有一个FRAME叫做query.htm,并且定义了一个javascript变量myWord 

 

HTML><HEAD

TITLEPassing data/TITLE

SCRIPT LANGUAGE="javascript"><!--

myWord="";

//--></SCRIPT

/HEAD

FRAMESET rows="*,1" FRAMEBORDER=no

FRAME name="active" src="query.htm"

FRAME name="dummy"

/FRAMESET

/HTML  

 

 

  页面query.htm有一个文本输入框以及一个到result.htm的链接,链接的onClick事件将设置FRAMESET页面的myWord变量为文本输入框的内容。代码如下: 

 

HTML><HEAD></HEAD

BODY

FORM name="myForm"

INPUT type=text size=12 name="myText"

P

A onClick="parent.myWord=myText.value"

href="result.htm"See it in yellow on blue!/A

/FORM

/BODY></HTML 

 

 

  页面result.htm取回并打印出myWord的数值,代码是: 

 

HTML

HEAD></HEAD

BODY bgcolor=#0000cc vlink=#99ffff

FONT size=+3 color=#ffff00

SCRIPT language="javascript"><!--

document.write(parent.myWord);

//--></SCRIPT

/FONT><P

A href="query.htm"Do it again/a

/BODY></HTML 

 

 

 

 

  这个例子很有实用价值。比如说,你可以设定访问者按一定的次序打开页面,收集用户信息,最后定制出用户特制的显示内容。 

 

  谈到状态维护功能,这个方法不会比使用cookieCGI更好,因为当FRAMESET重载或者退出时,变量值就丢失了。但是,它不要求服务器端响应,也不存在安全问题,因此还是可以小试一把的。

 

  用脚本控制浮动FRAME 

 

  用脚本控制普通FRAME与浮动FRAME的方法基本相同,唯一的差别是浮动FRAME按<IFRAME>出现的顺序定义索引位置。如果FRAMEs.length不为0,就表示可以安全地处理浮动FRAME。比如说,在下面的代码中,如果存在叫做floater的浮动FRAME,链接就指向它;否则就指向"_top" 

 

IFRAME name="floater" src="trog.htm" width=200 height=200></IFRAME 

 

A href="grot.html" target="floater" onClick="if (!self.FRAMEs.length)

  this.target='_top'"See grot.htm/A 

 

 

  带有浮动FRAMEWeb页面是FRAME文档的parent窗口,因此,多个浮动FRAME仍然可以通过parent.FRAME数组去访问每一个FRAME

 

  预防脚本编程错误 

 

  尽管FRAMEHTML的一个稳定规范说明,但DOM模型只把它们当做HTML元素而不是窗口,因此围绕FRAME的脚本编程并不是能很周全地定义。这个不足导致了当装载FRAME时会发生一些脚本执行方面的冲突。 

 

  立即修改FRAME内容的脚本经常会产生错误。原因在于:浏览器通常是先执行脚本命令,然后在按照src所示装入页面内容。 

 

  解决方法很直接,就是判断FRAME内容是否装载完毕。有一个好的处理技巧是以HTML页面开始所有的FRAME,由它象主FRAMESET报告装载请看。比如说,有一个FRAMESET页面,要等装载完所有的FRAME后才能执行函数goToIt(),那么就将下面的javascript程序段放进FRAMESET文档中: 

 

countDown=FRAMEs.length;

function soundOff() {

countDown--;

if (countDown==0) {

  goToIt();

  }

} 

 

 

  然后,在每个FRAME页面的<BODY>标记中设置上onLoad="parent.soundOff()"。当FRAME页面装载并执行soundOFF()后,等到countDown 0时,就表示FRAME完全装载完毕。

 
 类似资料: