Frame的应用

原创 2007年09月23日 13:05:00
 

HTML Tags and JavaScript tutorial



Frame的应用





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()"
>修改下面
3

FRAME
的内容<
/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
可以被任何
FRAME

parent.myName="Imelda"
的命令进行设置。
 
 
  不管在其他
FRAME
中的内容如何,在静态
FRAME
或者
FRAMESET
中的函数和变量始终保持可用。这个特征非常有价值,不仅可以将通用函数保存在其中从而压缩代码,而且,还可以实现页面间转换时的状态保持。
 
 
  下面的
FRAMESET
页面只有一个
FRAME
叫做
query.htm
,并且定义了一个
javascript
变量
myWord

 
 

HTML
><
HEAD



TITLE

Passing 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

 
 
 
 
 
  这个例子很有实用价值。比如说,你可以设定访问者按一定的次序打开页面,收集用户信息,最后定制出用户特制的显示内容。
 
 
  谈到状态维护功能,这个方法不会比使用
cookie

CGI
更好,因为当
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

 
 
 
  带有浮动
FRAME

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


 
  预防脚本编程错误
 
 
  尽管
FRAME

HTML
的一个稳定规范说明,但
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
完全装载完毕。
 


相关文章推荐

JS在Div中frame操作应用

  • 2011年02月10日 15:03
  • 3KB
  • 下载

Selenium frame 简单应用 元素定位

在公司做一个selenium的项目,为客户做一个外挂,方便客户操作。遇到了一个找不到元素标签的问题。  private final static String URL = "https://eust...

Frame动画简单的应用演示

  • 2016年06月04日 17:44
  • 707KB
  • 下载

Web应用系统 Web Frame

  • 2008年11月11日 12:39
  • 8.55MB
  • 下载

Animation Frame动画实现应用的欢迎界面

Android欢迎界面通常的实现可以通过Animation的Frame动画实现,ViewPager可以实现滑动效果的欢迎界面。本案例介绍Animation实现图示欢迎动画效果。...

HTML中的分割窗体示例(Frame应用

  • 2017年04月05日 17:32
  • 1.24MB
  • 下载

frame 和iframe 的区别以及和frameset 的关系及应用

1、frame不能脱离frameSet单独使用,iframe可以;  2、frame不能放在body中;如下可以正常显示:  -->                  -->  ...

在Frame中对Graphics类的应用

实现代码如下: package test; import java.awt.*; import java.awt.event.*; public class DrawLine extends ...

在Ubuntu上为Android系统的Application Frameworks层增加硬件访问服务 和 在Ubuntu上为Android系统内置Java应用程序测试Application Frame

序言:这两篇文章转自老罗的博客,讲解了aidl在framework层的使用,在前一篇文章中讲到了aidl可以用于android四大组件service中用于进程间的通讯;这里讲解了继承aidl生成的类来...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Frame的应用
举报原因:
原因补充:

(最多只允许输入30个字)