Frame框架在Html中的应用详解

======================================================

注：本文源代码点此下载

======================================================

frame(框架)是web上经常会看到的页面结构。使用可视web开发工具(比如dreamweaver或者frontpage),虽然可以在wysiwyg环境中通过简单的鼠标托拽完成frame的构建,但是要实现真正细致甚至强大的功能,仔细理解frame的代码结构至关重要!你将发现,frame原来是这样的亲切易用。
创建基本的frameset:
frameset页面与普遍的web页面有些不同。虽然仍旧以和包含标题的标记以及其他脚本开始,但是其内容仅仅是表示的各个页面的版式设计。因此,不再需要有元素,只需要标记。
通过标记的和属性,浏览器窗口被分割为一个个格子。和的设置值可以是固定的像素值,可以是总空间的百分比值,还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。比如说:
cols="80,20%,*" 分为3列,宽度分别为80像素,窗口宽度的20%,以及剩余宽度
rows="25%,75%" 分为2行,宽度分别为窗口宽度的25%和75%
rows="*,3*" 与上述第2个表示的一样,分为2行,但表示方法不同:第一列宽度为第二行的1/3
在和之间,用多个标记表示每个分割区。col表示从左到右的列,row表示从上到下的行。每个有一个src属性,给出了这个frame的内容。它可以是浏览器能显示的任何一个合法url,或者是另外一个frameset。为预防递归现象,一个frame不能包含它本身所在的frameset页面。要用name属性定义frame的名字,这样就可以在代码或者脚本程序中引用它。 请看一段基本的frameset代码:
simple frameset
frame间的链接:
一个frameset结构的页面,新文档只转载进窗口的一部分中,而其他页面则保持静态不变。当用户点击frame中的链接时,新内容就在同一frame内打开。要让新内容在其他frame中打开,可以设置main page
our mission
our staff
frommco splash page
请注意最后一个链接中target的定义为_parent,这属于4个特殊的保留值。它们是:
_parent:在当前frameset位置显示新href。
_top:在当前整个窗口位置显示新href,比如本身frameset位于另一个frameset中。
_self:强制在当前frame中显示新href。
_blank:在新窗口中显示href。
表示客户端图形地图的e.htm" target="floater">show one.htm
show two.htm
bring back start.htm
注意,对应支持标记的浏览器,任何位于和间的内容都将忽略。反之,其中的内容将显示出来,这可以用作解释当前浏览器不支持。
何时使用frame:
我们知道,frameset的基本用途就是分割浏览器窗口,使得窗口的一部分内容改变,而其他部分保持不变。利用这个特性,就可以实现工具栏导航功能,一个frame内放置静态菜单页面,用户点击其中的项目后,在另外的frame内显示相关的内容。这样就可以从整体上减少文件大小,因为不必在每个内容页面中再包含菜单项目。
frame有2个明显的不足:
frame从另外的级别上增加了站点的管理,原因在于超级链接不仅仅要指向适当的页面,而且也会装载到相关的frame内。
另外,大多数浏览器在执行“添加书签”的操作时,只能记录下frameset的初始位置。不管添加书签时是位于多么深的frameset中,当再次选择这个书签时,就会返回到frameset的初始页面。这就加大了访问者浏览指定内容的难度。
但是,如果好好地组织站点信息,使导航操作只有不深的几层,那么,使用frame就能很好地为访问者服务。记住:访问者都希望简洁的导航信息。
当然,导航并非是使用frame的唯一原因,也可以使用frame创建交换工具和交换页面。而且,frame的多文档框架结构非常适于被javascript应用程序所操作。
用frame设计站点:
最常用的frame结构就是“菜单-内容”frameset。一个frame内放置导航菜单,另一个frame内转载子菜单,每个子菜单的链接就指向本身。唯一的有target的链接都在菜单frame内。 请看下面的例程代码:
welcome to my site!
welcome to my site.
introduction
products
reviews
用脚本控制导航frame:
上面介绍了frame的html代码结构,现在开始走向更深一步:使用脚本程序控制frame。
每个window对象有一个frames数组。对于普通的web页面,这个数组是空的,其属性length为0。带有frameset的页面,按照其上标记的前后顺序,生成一个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,都位于窗口下部:
第一个frame中的文档叫做link.htm,使用点击其中的单一链接就可以修改其他三个frame中的内容。实现代码如下:
cript:navall()">修改下面3个frame的内容
cript">
用脚本控制动态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';
然后,建立小组成员照片的图形地图,将每个链接到函数showme(n),由它负责根据索引数据创建信息:
part1 = '';
part1+= '
';
part2 = '
';
function showme(n) {
parent.frames[1].document.open();
parent.frames[1].document.write(part1);
parent.frames[1].document.write(empid
);
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:
passing data
cript">
页面query.htm有一个文本输入框以及一个到result.htm的链接,链接的onclick事件将设置frameset页面的myword变量为文本输入框的内容。代码如下:
click="parent.myword=mytext.value" href="result.htm">see it in yellow on blue!
页面result.htm取回并打印出myword的数值,代码是:
cript">
do it again
这个例子很有实用价值。比如说,你可以设定访问者按一定的次序打开页面,收集用户信息,最后定制出用户特制的显示内容。
谈到状态维护功能,这个方法不会比使用cookie或cgi更好,因为当frameset重载或者退出时,变量值就丢失了。但是,它不要求服务器端响应,也不存在安全问题,因此还是可以小试一把的。
用脚本控制浮动frame:
用脚本控制普通frame与浮动frame的方法基本相同,唯一的差别是浮动frame按出现的顺序定义索引位置。如果frames.length不为0,就表示可以安全地处理浮动frame。比如说,在下面的代码中,如果存在叫做floater的浮动frame,链接就指向它;否则就指向"_top":
click="if (!self.frames.length) this.target='_top'">see grot.htm
带有浮动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页面的标记中设置上onload="parent.soundoff()"。当frame页面装载并执行soundoff()后,等到countdown 为0时,就表示frame完全装载完毕。
总结:
frame是双刃剑,使用不好会造成混乱的站点结构和外观,使用得当将大大方便用户的操作方式以及形成清晰的页面风格。相信你看完本文后,会对frame有了更亲切的认识。

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/