快速精通FRAME（下）
我们知道，FRAMESET的基本用途就是分割浏览器窗口，使得窗口的一部分内容改变，而其他部分保持不变。利用这个特性，就可以实现工具栏导航功能，一个FRAME内放置静态菜单页面，用户点击其中的项目后，在另外的FRAME内显示相关的内容。这样就可以从整体上减少文件大小，因为不必在每个内容页面中再包含菜单项目。
FRAME有2个明显的不足：
- FRAME从另外的级别上增加了站点的管理，原因在于超级链接不仅仅要指向适当的页面，而且也会装载到相关的FRAME内。
- 另外，大多数浏览器在执行“添加书签”的操作时，只能记录下FRAMESET的初始位置。不管添加书签时是位于多么深的FRAMESET中，当再次选择这个书签时，就会返回到FRAMESET的初始页面。这就加大了访问者浏览指定内容的难度。
当然，导航并非是使用FRAME的唯一原因，也可以使用FRAME创建交换工具和交换页面。而且，FRAME的多文档框架结构非常适于被javascript应用程序所操作。
用FRAME设计站点
最常用的FRAME结构就是“菜单－内容”FRAMESET。一个FRAME内放置导航菜单，另一个FRAME内转载子菜单，每个子菜单的链接就指向本身。唯一的有target的链接都在菜单FRAME内。 请看下面的例程代码：
| ＜HTML＞＜HEAD＞ ＜TITLE＞Welcome to my site!＜/TITLE＞ ＜/HEAD＞ ＜FRAMESET cols="150,*"＞ ＜FRAME name="menu" src="menu.htm"＞ ＜FRAME name="content" src="intro.htm"＞ ＜/FRAMESET＞ ＜BODY＞ ＜!--如果是支持FRAME的浏览器，则不会显示下面的内容；否则，也显示出简单菜单页面--＞ Welcome to my site.＜P＞ ＜A href="intro.htm"＞Introduction＜/A＞ ＜A href="products.htm"＞Products＜/A＞ ＜A href="reviews.htm"＞Reviews＜/A＞ ＜/BODY＞＜/HTML＞ |
> 用脚本控制导航FRAME
上面介绍了FRAME的HTML代码结构，现在开始走向更深一步：使用脚本程序控制FRAME。
每个Window对象有一个FRAMEs数组。对于普通的Web页面，这个数组是空的，其属性length为0。带有FRAMESET的页面，按照其上＜FRAME＞标记的前后顺序，生成一个FRAME数组。由于FRAMESET所在页面是每个FRAME的parent窗口，数组索引从0开始，所以从FRAMESET中引用第3个FRAME时就使用self.FRAMEs[2]，从其他FRAME文档中引用第3个FRAME时就使用parent.FRAMEs[2]。
FRAME数组中的每一个成员都是一个窗口，它们具有普通窗口的一切方法、事件以及属性，并且包括它自己的FRAME数组（当它包含另外一个FRAMESET时）。因此，用脚本去修改一个FRAME的内容就象修改它的location.href一样简单。
下面举例说明，假设一个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按＜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完全装载完毕。
总结
FRAME是双刃剑，使用不好会造成混乱的站点结构和外观，使用得当将大大方便用户的操作方式以及形成清晰的页面风格。相信你看完本文后，会对FRAME有了更亲切的认识。
- 上一篇文章：快速精通FRAME（上）
- 下一篇文章：巧用Photoshop打造美丽拼图特效
相 关 文 章
相 关 软 件
没有相关下载
本站搜索(搜索结果将在新窗口打开)