📄 9.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>实现更复杂的交互</title>
<meta name="Microsoft Theme" content="maize 011">
</head>
<body background="maizbk.jpg" bgcolor="#FFFFFF" text="#000000" link="#669999" vlink="#999900" alink="#3366CC">
<!--mstheme--><font face="宋体"><!--mstheme--></font>
<table border="0" width="100%">
<tr>
<td width="100%">
<!--mstheme--><font face="宋体">
<p align="center"><b><font class="title" lang="ZH-CN" size="4" color="#000000">实现更复杂的交互</font></b></p>
<p align="left" style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">一、什么是框架</font></b></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTM
L文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。<br>
框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。见图9-1所示。</font></p>
<p style="line-height: 150%"><font face="System,??" lang="ZH-CN" size="3"><img src="Image28.gif" width="398" height="264"></font></p>
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">图9-1
框架对象</font></b></p>
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体"><!--mstheme--></font>
<pre style="line-height: 150%"><font size="3"><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></font></pre>
<!--mstheme--><font face="宋体">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 通过[Framset
]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而
cols这项参数是告诉浏览器您想将视窗分割成几 行。</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 可以用很多组的
<frameset...> tags 将视窗分割得更复杂。</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 可以给每个frame一个"名字"
(name)。frame的名字在JavaScript语法中的地位非常重要。</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 可以用
<src> 告诉浏览器您要载入哪一个 HTML文件。</font></p>
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">二、如何访问框架</font></b></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:</font></p>
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<dir>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">parent.frames[Index1].docuement.forms[index2]</font></p>
</dir>
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">通过parent.frames.length确定窗口中窗体的数目。</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访：</font></p>
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">parent.framesName.decument.formNames.elementName.(m/p)</font></b></p>
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> </font></p>
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">三、范例</font></b></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 下面我们通过一个具体的实例,
来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。</font></p>
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">test9-1.html为显示标题文档；<br>
test9_2.html为第二框架文档其中需要注意的是:<br>
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；<br>
test7_3.html为第三框架文档。</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> </font></p>
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<ol>
<li>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"><b>主调文档</b></font>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。</font></p>
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">Test9.htm</font></b></p>
<!--mstheme--></font>
<pre style="line-height: 150%"><font size="3"><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></font></pre>
<!--mstheme--><font face="宋体">
<li>
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">第一个框架</font></b>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">主要作用是显示标题文档。</font></p>
<p style="line-height: 150%"><b><i><u><font face="宋体" lang="ZH-CN" size="3">Test9_1.htm</font></u></i></b></p>
<!--mstheme--></font>
<pre style="line-height: 150%"><font size="3"><HTML>
<HEAD>
</HEAD>
<H2>使用框架实现WEB交互</H2>
</HTML>
</font></pre>
<!--mstheme--><font face="宋体">
<li>
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">第二个框架</font></b>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。</font></p>
<p style="line-height: 150%"><b><u><font face="宋体" lang="ZH-CN" size="3">Test9_2.htm</font></u></b></p>
<!--mstheme--></font>
<pre style="line-height: 150%"><font size="3"><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>
</font></pre>
<!--mstheme--><font face="宋体">
<li>
<p style="line-height: 150%"><b><font face="宋体" lang="ZH-CN" size="3">第三个框架</font></b></li>
</ol>
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">主要作用是实现交互。</font></p>
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"><b>Test9_3.htm</b></font></p>
<!--mstheme--></font>
<pre style="line-height: 150%"><font size="3"><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></font></pre>
<!--mstheme--><font face="宋体">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"></HTML></font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 在浏览器中的结果见图9-2所示。</font></p>
<p style="line-height: 150%"><font face="System,??" lang="ZH-CN" size="3"><img src="Image7.gif" width="496" height="345"></font></p>
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--mstheme--></font>
<!--msthemelist--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3">图
9-2 在浏览器中结果</font></p>
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> </font></p>
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<!--msthemelist--></table>
<!--mstheme--><font face="宋体">
<p style="line-height: 150%"><font face="宋体" lang="ZH-CN" size="3"> 本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。</font></p>
<p> <!--mstheme--></font></td>
</tr>
</table>
<!--mstheme--><font face="宋体"><!--mstheme--></font>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -