项目十六用JavaScript实现更复杂的交互.DOCVIP

PAGE PAGE 1 项目十六：用JavaScript实现更复杂的交互 任务16.1 什么是框架 　　框架Frames最主要功用是分割视窗，使每个小视窗能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。 　　框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。见图16-1所示。 图16-1 框架对象 HTML HEAD /HEAD Frameset Rows=20%,80% frame src=test9_1.html Frameset Cols=50%,50% frame src=test9_2.html frame src=test9_3.html /Frameset /Frameset /HTML 　　以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。 　　通过[Framset ]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参数是告诉浏览器您想将视窗分割成几行。 　　可以用很多组的 frameset... tags 将视窗分割得更复杂。 可以给每个frame一个名字 (name)。frame的名字在JavaScript语法中的地位非常重要。 可以用 src 告诉浏览器您要载入哪一个 HTML文件。 任务16.2 如何访问框架 　　在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在　　父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问: parent.frames[Index1].docuement.forms[index2] 　　通过parent.frames.length确定窗口中窗体的数目。 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访： parent.framesName.decument.formNames.elementName.(m/p) 任务16.3 范例 　　下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。 　　Tset16.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体； Test16-1.html为显示标题文档； Test16_2.html为第二框架文档其中需要注意的是:通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”； Test16_3.html为第三框架文档。 主调文档：主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。 Test16.htm HTML HEAD /HEAD Frameset Rows=10%,90% frame src=test9_1.htm Frameset Cols=40%,60% frame src=test9_2.htm frame src=test9_3.htm /Frameset /Frameset /HTML 第一个框架 主要作用是显示标题文档。 Test9_1.htm HTML HEAD /HEAD H2使用框架实现WEB交互/H2 /HTML 　 第二个框架：主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。 Test16_2.htm HTML HEAD /HEAD Body Form name=test9_1 请选择城市：BR Select name=select1 Multiple Option云南省 Option四川省 Option贵州省 Option山东省 Option江苏省 Option浙江省 Option安徽省 Option河南省 /selectBR HR Input Type=Submit name= value=提交 Input Type=reset name= value=复位 /Form pre script language=Ja