📄 js9.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0055)http://www.pinluo.com/book/javascript/js9.htm -->
<HTML><HEAD><TITLE>第九讲 实现更复杂的交互 - 品络科技 pinluo.com</TITLE>
<META http-equiv=Content-Language content=zh-cn>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>TABLE.MsoNormalTable {
FONT-SIZE: 10pt; FONT-FAMILY: "Times New Roman"; mso-style-parent: ""
}
</STYLE>
<META content="MSHTML 6.00.2800.1476" name=GENERATOR></HEAD>
<BODY>
<DIV align=center>
<TABLE id=table1 height=607 cellSpacing=0 cellPadding=0 width=800
background=js9.files/sc1.jpg border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=560 border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<P align=center> </P></TD></TR>
<TR>
<TD>
<P align=center><IMG height=34 src="js9.files/sc.jpg" width=226
border=0></P></TD></TR>
<TR>
<TD>
<P align=center>
<P align=center><FONT color=#ff0000>第九讲 实现更复杂的交互</FONT>
<P> <FONT
size=2>框架Frames最主要功用是"分割"视窗，使每个"小视窗"能显示不同的HTML文件，不同框架之间可以互动(interact)，这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames，第一个frame可显示书的目录，第二个frame则显示章节的具体内容。</FONT>
<P><FONT size=2>
框架可以将屏幕分割成不同的区域，每个区域有自己的URL，通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。下面我们先看一下框架的例子。</FONT>
<P align=center><IMG height=264 src="js9.files/image9.jpg" width=398
border=0>
<P><FONT size=2>
<HTML><BR>
<HEAD><BR>
</HEAD><BR> <Frameset
Rows="20%,80%"><BR> <frame
src="test9_1.html"> <BR> <Frameset
Cols="50%,50%"><BR> <frame
src="test9_2.html"> <BR> <frame
src="test9_3.html"><BR>
</Frameset><BR>
</Frameset><BR> </HTML></FONT>
<P><FONT size=2>
以上HTML标识将屏幕分成三个框架。先将窗口分成以二行为单位的窗口，之后再按分成二个窗口。并在相应的框架中放入自己的HTML文档。</FONT>
<P><FONT size=2> 通过[Framset
]告诉浏览器您要设置几个框架；rows这项参数告诉浏览器您想将视窗分割成几列；而 cols这项参数是告诉浏览器您想将视窗分割成几
行。</FONT>
<P><FONT size=2> 可以用很多组的 <frameset...> tags
将视窗分割得更复杂。可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。可以用
<src> 告诉浏览器您要载入哪一个HTML文件。</FONT>
<P><FONT size=2>二、如何访问框架</FONT>
<P><FONT size=2>
在前面我们介绍过使用document.forms[]实现单一窗体中不同元素的访问。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，他在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:<BR>
parent.frames[Index1].docuement.forms[index2]<BR>
通过parent.frames.length确定窗口中窗体的数目。<BR>
除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访：<BR>
parent.framesName.decument.formNames.elementName.(m/p)</FONT>
<P><FONT size=2>三、范例</FONT>
<P><FONT size=2> 下面我们通过一个具体的实例,
来说明利用JavaScript脚本在WEB中实现更为复杂的信息交互。该例子是在一个多窗口中实现窗体信息的动态交互,在程序中首先在浏览器窗口中制作三个用于窗体交互的窗口,每个窗体窗口实现不同信息的动态交互。<BR>
tset9.html为主调用文档它首先将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体；<BR>
test9-1.html为显示标题文档；<BR>
test9_2.html为第二框架文档其中需要注意的是:<BR>
通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”；<BR>
test7_3.html为第三框架文档。</FONT>
<P><FONT size=2>1.主调文档 </FONT>
<P><FONT size=2>
主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。<BR>
Test9.htm<BR> <HTML><BR>
<HEAD><BR>
</HEAD><BR> <Frameset
Rows="10%,90%"><BR> <frame
src="test9_1.htm"> <BR> <Frameset
Cols="40%,60%"><BR> <frame
src="test9_2.htm"> <BR> <frame
src="test9_3.htm"><BR>
</Frameset><BR>
</Frameset><BR> </HTML></FONT>
<P><FONT size=2>2.第一个框架</FONT>
<P><FONT size=2>
主要作用是显示标题文档。<BR> Test9_1.htm<BR>
<HTML><BR>
<HEAD><BR>
</HEAD><BR>
<H2>使用框架实现WEB交互</H2><BR>
</HTML></FONT>
<P><FONT size=2>3.第二个框架</FONT>
<P><FONT size=2>
主要作用是实现交互。可以通过JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。<BR>
Test9_2.htm<BR> <HTML><BR>
<HEAD><BR>
</HEAD><BR>
<Body><BR> <Form
name="test9_1"><BR>
请选择城市：<BR><BR> <Select name="select1"
Multiple><BR>
<Option>云南省<BR>
<Option>四川省<BR>
<Option>贵州省<BR>
<Option>山东省<BR>
<Option>江苏省<BR>
<Option>浙江省<BR>
<Option>安徽省<BR>
<Option>河南省<BR>
</select><BR><BR>
<HR><BR> <Input Type="Submit" name=""
value="提交"><BR> <Input Type="reset" name=""
value="复位"><BR>
</Form><BR>
<pre><BR> <script
language="JavaScript"><BR>
document.test9_1.elements[0].options[0].text="昆明市";<BR>
document.test9_1.elements[0].options[1].text="成都市";<BR>
</script><BR>
</pre><BR>
</Body><BR> </HTML></FONT>
<P><FONT size=2>4.第三个框架</FONT>
<P><FONT size=2> 主要作用是实现交互。<BR>
Test9_3.htm<BR> <HTML><BR>
<HEAD><BR>
</HEAD><BR>
<Body><BR> <Form
name="test9_2"><BR>
请输入用户名：<BR> <Input Type="text" name="text1"
Value="" Size=20><BR><BR>
<HR><BR> 请选择:<BR>
<Input Type="Checkbox" name="checkbox1"
Value="qb">全部信息<BR><BR> <Input
Type="Checkbox" name="checkbox2"
Value="bf">部分信息<BR><BR> <Input
Type="Checkbox" name="checkbox3"
Value="sy">所有城市<br><BR>
<HR><BR> <Input Type="Submit" name=""
value="提交"><BR> <Input Type="reset" name=""
value="复位"><BR>
<BR><BR> </Form><BR>
<script language="JavaScript"><BR>
document.test9_2.elements[0].value="劳动和社会保障";<BR>
document.test9_2.elements[1].checked=true;<BR>
document.test9_2.elements[2].checked=true;<BR>
document.test9_2.elements[3].checked=false;<BR>
</script><BR>
</Body><BR> </HTML></FONT>
<P align=center><IMG height=345 src="js9.files/image10.jpg"
width=496 border=0>
<P><FONT size=2>
本讲介绍框架中的基本元素的主要功能和使用，利用JavaScript脚本可以非常方便、灵活地实现Web页面更为复杂的信息交互，这是HTML标识语言所不能具备的。从中可以看出JavaScript是多么的吸引众多的Web设计人员。</FONT>
<P><FONT size=2>
到此为止，我们的JavaScript就结束了，如有不当之处恳请指正。</FONT></P></TD></TR>
<TR>
<TD>
<P align=right>
<P align=right><FONT size=2><A
href="http://www.pinluo.com/book/javascript/js8.htm">上一页</A></FONT></P></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE></DIV></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -