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