YouDows.COM ---友道网

何时使用FRAME

　　我们知道，FRAMESET的基本用途就是分割浏览器窗口，使得窗口的一部分内容改变，而其他部分保持不变。利用这个特性，就可以实现工具栏导航功能，一个FRAME内放置静态菜单页面，用户点击其中的项目后，在另外的FRAME内显示相关的内容。这样就可以从整体上减少文件大小，因为不必在每个内容页面中再包含菜单项目。

　　FRAME有2个明显的不足：

• FRAME从另外的级别上增加了站点的管理，原因在于超级链接不仅仅要指向适当的页面，而且也会装载到相关的FRAME内。
• 另外，大多数浏览器在执行“添加书签”的操作时，只能记录下FRAMESET的初始位置。不管添加书签时是位于多么深的FRAMESET中，当再次选择这个书签时，就会返回到FRAMESET的初始页面。这就加大了访问者浏览指定内容的难度。

　　但是，如果好好地组织站点信息，使导航操作只有不深的几层，那么，使用FRAME就能很好地为访问者服务。记住：访问者都希望简洁的导航信息。

　　当然，导航并非是使用FRAME的唯一原因，也可以使用FRAME创建交换工具和交换页面。而且，FRAME的多文档框架结构非常适于被javascript应用程序所操作。

　　用FRAME设计站点

copyright dedecms

　　最常用的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

　　上面介绍了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

　　如果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＞';

copyright dedecms

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间的脚本控制

　　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＞

copyright dedecms

＜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的方法基本相同，唯一的差别是浮动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有了更亲切的认识。

（出处：Youdows.com/） 织梦内容管理系统

复制地址给好友
关键字: 精通,快速,FRAME,页面,FRAMESET,一个,内容,