| 网站首页 | JAVA文章 | AppServers | Web开发 | 应用开发 | 资源下载 | 论坛
    学好外语能够获得更多的国外先进编程技术  [enadd  2006年12月25日]        
设为首页 加入收藏 联系站长
您现在的位置: 编程笔记网 >> Web开发 >> 网页制作 >> Javascript >> 文章正文
[组图]第九讲 实现更复杂的交互            【字体:
第九讲 实现更复杂的交互
作者:-    文章来源:-    点击数:    更新时间:2006-5-25

框架Frames最主要功用是"分割"视窗,使每个"小视窗"能显示不同的HTML文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容。

    框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问。实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。下面我们先看一下框架的例子。

    <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文件。

二、如何访问框架

    在前面我们介绍过使用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为第三框架文档。

1.主调文档

    主要作用是将窗口划分为具有二行的窗体,尔后再将第二行的窗体划分为具有二列的窗体。
    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>

2.第一个框架

    主要作用是显示标题文档。
    Test9_1.htm
    <HTML>
    <HEAD>
    </HEAD>
    <H2>使用框架实现WEB交互</H2>
    </HTML>

[1] [2] [3] 下一页  

文章录入:enadd    责任编辑:enadd 
  • 上一篇文章:

  • 下一篇文章: 没有了
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
  • 第八讲 WEB页面信息的交互

  • 第七讲 窗口及输入输出

  • 第六讲 使用内部对象系统

  • 第五讲 创建新对象

  • 第四讲 基于对象的JavaScrip…

  • 第三讲 JavaScript程序构成

  • 第二讲 JavaScript基本数据结…

  • 第一讲 JavaScript语言概况

  •   网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 管理登录 |