音视频点播系统:javascript实现的交互（五）

来源：百度文库 编辑：九乡新闻网 时间：2024/04/29 17:17:41
本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。

一、什么是框架
　　框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。
　　框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。


图9-1 框架对象













　　以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。
　　通过[Framset ]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参数是告诉浏览器您想将视窗分割成几行。
　　可以用很多组的 tags 将视窗分割得更复杂。
　　可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。 　　　　可以用 告诉浏览器您要载入哪一个 HTML文件。

二、如何访问框架
　　在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在　　父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
parent.frames[Index1].docuement.forms[index2]
　　通过parent.frames.length确定窗口中窗体的数目。 除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访：
parent.framesName.decument.formNames.elementName.(m/p)

　 三、范例
　　下面我们通过一个具体的实例, 来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。
　　tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；
test9-1.html为显示标题文档；
test9_2.html为第二框架文档其中需要注意的是:
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；
test7_3.html为第三框架文档。

　主调文档
主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。
Test9.htm











第一个框架
主要作用是显示标题文档。
Test9_1.htm



使用框架实现WEB交互



　
第二个框架
主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。
Test9_2.htm





请选择城市：












　
第三个框架
主要作用是实现交互。
Test9_3.htm





请输入用户名：



请选择:
全部信息

部分信息

所有城市










　　在浏览器中的结果见图9-2所示。
javascript实现的交互（五） javascript和ActiveX的交互问题 .NET技术 / ASP.NET - CS... 网络课程的交互设计及其实现11 javascript实现类似google和msn space的拖拽 javascript的输入输出（二） javascript 尚未实现错误解决办法 实现和IE浏览器交互的几种方法的介绍 4月17号讨论作业（远程教育中教与学交互的交互策略中学习资源交互） 远程教育的教学交互 交互设计的方法 交互设计的出发点 游戏的交互定位 Silverlight与Html Dom的交互（二） 学习JavaScript的理由 javascript对象的基本知识 CSS调试技巧五则，兼谈“提问的艺术” - CSS,Javascript,jQuery,视... CSS调试技巧五则，兼谈“提问的艺术” - CSS,Javascript,jQuery,视... javascript窗口（三） 远程教育的教学交互问题 现代远程教育教学交互的问题 学习资源的交互策略 怎么用 javascript 实现拖拽 - javascript, Drag_and_Drop, 拖拽, 移动元素, 关于V8 JavaScript Engine的使用方法研究（二） 关于V8 JavaScript Engine的使用方法研究（三）