Frame的应用

来源：互联网发布：7z for mac 破解版编辑：程序博客网时间：2024/06/10 06:19

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
完全装载完毕。