用JavaScript实现更复杂的交互

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

图9-1 框架对象

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

<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脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。
Test9_2.htm

<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_1">
请选择城市：<BR>
<Select name="select1" Multiple>
<Option>云南省
<Option>四川省
<Option>贵州省
<Option>山东省
<Option>江苏省
<Option>浙江省
<Option>安徽省
<Option>河南省
</select><BR>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="复位">
</Form>
<pre>
<script language="JavaScript">
document.test9_1.elements[0].options[0].text="昆明市";
document.test9_1.elements[0].options[1].text="成都市";
</script>
</pre>
</Body>
</HTML>

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

<HTML>
<HEAD>
</HEAD>
<Body>
<Form name="test9_2">
请输入用户名：
<Input Type="text" name="text1" Value="" Size=20><BR>
<HR>
请选择:
<Input Type="Checkbox" name="checkbox1" Value="qb">全部信息<BR>
<Input Type="Checkbox" name="checkbox2" Value="bf">部分信息<BR>
<Input Type="Checkbox" name="checkbox3" Value="sy">所有城市<br>
<HR>
<Input Type="Submit" name="" value="提交">
<Input Type="reset" name="" value="复位">
<BR>
</Form>
<script language="JavaScript">
document.test9_2.elements[0].value="劳动和社会保障";
document.test9_2.elements[1].checked=true;
document.test9_2.elements[2].checked=true;
document.test9_2.elements[3].checked=false;
</script>
</Body>
</HTML>

在浏览器中的结果见图9-2所示。

图 9-2 在浏览器中结果

本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。

转载于:https://www.cnblogs.com/carekee/articles/2021968.html

用JavaScript实现更复杂的交互相关推荐

如何获得更好的交互体验_制定更好的用户体验决定的4条聪明的心理学规则
如何获得更好的交互体验 According to a study by Missouri University of Science and Technology, over 94 percent o ...
JavaScript基础知识点之浏览器交互
JavaScript基础知识点之浏览器交互与用户交互的 3 个浏览器的特定函数:alert.prompt.confirm 1.aler:显示信息 <!DOCTYPE html> < ...
如何获得更好的交互体验_如何使用有限的调色板获得更好的照片
如何获得更好的交互体验 Color is one of the most important aspects of photography. It can make or break your ima ...
JavaScript与.NET应用程序交互_实验1
JavaScript与.NET应用程序交互_实验1 C#调用JavaScript函数本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/ ...
TypeScript VS JavaScript 谁更牛？尤雨溪：TypeScript不会取代JavaScript
点击"开发者技术前线",选择"星标????" 让一部分开发者看到未来来源 | evrone.com 前端之颠译者 | 核子可乐 TypeScript 和 ...
通过了解JavaScript来更好的编写代码与程序
几周前,我们开始写旨在深入挖掘JavaScript及其工作机制的一系列文章:我们认为,通过了解JavaScript的构造单元以及这些构造单元如何组织在一起,您就能够编写更好的代码和应用程序. 该系列的 ...
Android之利用JSBridge库实现Html，JavaScript与Android的所有交互
java 和 js互通框架 WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java和js的互相调用的桥梁. 替代了WebView的自带 ...
如何在 JavaScript 中更好地使用数组
本文短小精悍,我保证.在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组使用的)错误经常出现.同时,我自己也会犯这些错误,因此有了这篇文章.让我们一起学习,以确保以后能 ...
javascript字典中添加数组_如何在 JavaScript 中更好地使用数组
在 freeCodeCamp 社区阅读原文. 本文短小精悍,我保证.在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组使用的)错误经常出现.同时,我自己也会犯这些错误, ...
python和java就业对比_Python，Java和JavaScript哪个更容易就业？
编程语言未来哪个更有前景?哪个会被淘汰?这些都是初入IT行业的小白比较关心的问题.今天就借此机会,来谈谈:Python,Java和JavaScript这三门语言,到底哪个更具发展前景? 谈论这个问题之 ...

用JavaScript实现更复杂的交互

用JavaScript实现更复杂的交互相关推荐

最新文章

热门文章