网页制作基础技巧 框架(帧窗口)间的交互

技巧|交互|网页

  在多窗口的分帧页面中,各分窗口之间的信息交互是经常的事。在导航窗口中点了超级链接,那么如何在另一窗口中打开链接的网页呢?我在这个窗口中按下按钮,能在另一个窗口中写信息吗?窗口那么多,又如何识别窗口呢?请看下面的例子。

  一、在导航窗口点击链接,在另一窗口打开网页

  现有一分帧页面如上图所示的,A窗口是网站logo及广告,B窗口是导航栏,C是显示页面的窗口。该分帧页面的源代码为:

<frameset rows="20%,*"> 
<frame name="topFrame" scrolling="NO" noresize src="toppage.htm" >
<frameset cols="18%,*"> 
<frame name="leftFrame" noresize src="leftpage.htm">
<frame name="mainFrame" src="mainpage.htm">
</frameset>
</frameset>

 
  若要求在B窗口中的链接页面(test.htm)在C窗口中打开,那么B窗口中的链接应这样写:<a herf="test.htm" target="mailFrame">此链接的页面在C窗口中打开</a>,在这里起关键作用的是<A>标记中的target参数,你想在那个窗口中打开网页,就在Target参数中设置那个窗口的名称。

  二、在B窗口中按下一个按钮,在C窗口中写一行字

  本例的页面格式与上例相同,完成后的效果是这样的:按下B窗口中“在C窗口写字”的按钮后,在C窗口中就出现一行文字“嗨!你好!这是通过B窗口控制而写的字。”。分帧页面的代码及每个窗口中的网页文件与上例相同。

  制作方法:

  1、 在C窗口网页(mainpage.htm)的源代码<head>与</head>之间插入下面这段Javascript程序:

<script language="Javascript">
<!--
function htest(){
document.write("嗨!你好!这是通过B窗口控制而写的字。") 
}
-->
</script>

  这段程序的作用是在当前窗口写上一段文字。

  2、那么如何在B窗口中调用C窗口中的程序呢?先看B窗口中“在C窗口中写字”这个按钮的源代码:

<input type="button" value="在C窗口中写字" >

  在这段代码中,关键是代码“parent.mainFrame”,这里引入一个新的概念—窗口结构关系,也就是在多窗口页面中,各窗口之间的关系是以什么原则来确定的。窗口关系的确定原则是:当前窗口分割出来的窗口为当前窗口的“子窗口”(children),那么当前窗口就是分割出来窗口的“父窗口”(parent)。如本例中各窗口的关系如下:

  从上表可得知,“浏览器窗口”是“topFrame”和“下部窗口”的“父窗口”,而下部窗口又是“leftFrame”和“mainFrame”两个窗口的“父窗口”。两个窗口之间的联系必须通过它们的父窗口才能进行,所以本例中要调用C窗口中网页上的“htest()”很显然是通过C与B的parent再到mainFrame,然后调用htest()程序。

  那么若C窗口中向B窗口中写字的代码就是这样的了: ;那么,在A窗口中要向C窗口中写一段文字的代码你知道怎样写吗?对了,就是这样:。

  从上面的例子中可看出,在各窗口之间进行交互信息,关键的问题是要搞清楚窗口与窗口之间的关系,其它的操作就比较简单了。

时间: 2024-12-31 16:14:37

网页制作基础技巧 框架(帧窗口)间的交互的相关文章

网页制作基础技巧 框架(帧窗口)技巧

技巧|网页 帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果.实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口.每个窗口都对应有自己的HTML页面,按照一定的组合方式组合在一起,以实现特殊的效果. 在HTML中用<frameset>(分割窗口标记)来分割窗口,<frameset>在多窗口页面中的地位就相当于<body>在普通单窗口页面中的地位,在页面中用<f

学习网页制作基础入门教程(8)框架标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 框架概念 1. 首先,各位先看看右边这张图片,将利用这张图来做解释,这样子,讲起来可能会清楚一些. 我们可以看见,右边的这个图片,一共分为 1 . 2 . 3 三个框架,每一个框架,各有

学习网页制作基础入门教程(9)序列标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 无序标签 1. 序列标签基本上可分为两种,一种是"无序条列",一种是"有序条列".所谓"无序条列"

学习网页制作基础入门教程

教程|入门教程|网页 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)背景标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 学习网页制作基础入门教程(8)框架标签 学习网页制作基础入门教程(9)序列标签 学习网页制作基础入门教程(10)表单标签 学习网页制作基础入门教程(11)注意的问题

学习网页制作基础入门教程(7)表格标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 表格单元格对齐位置设定 1. 首先我们来看一个最简单的表格: 原始代码 显示结果 <TABLE BORDER=1><TR><TD>1</TD></TR></TABLE&g

学习网页制作基础入门教程(6)连接标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 网页内部的连接 1. 使用方法: 先在欲连接处作记号:<A NAME="here"> 这里是你想连接的点 </A> 设定连接:<A HREF="#here"> 连接 </A> 2. 标签解

学习网页制作基础入门教程(3)字体标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 标题标签 1. 使用方法:<H1>标题內容</H1> 2. 标签解释:标题的大小一共有六种,两个标签一组,也就是从 <H1> 到 <H6> , <H1> 最大,<H6>最小.使用标题标签时,该标签会将字体变为粗体字,并会自成一行. 3. 使用范例: 原始碼 呈現結果 <H1>标题1</H1> 标题1

学习网页制作基础入门教程(5)背景标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 背景标签 1. 使用方法:<BODY BGCOLOR="#ffffff" BACKGROUND="bg.jpg"> 2. 标签解释:这个标签其实应该老早就要讲了,毕竟它是制作网页不可或缺的基本要素之一,我们背景颜色或图片的设定以及连接字体的颜色,统统都放在 <

学习网页制作基础入门教程(4)图象标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 图象标签 1. 使用方法:<IMG SRC="/UploadPic/2007-7/200777152731585.gif" ALT="本站特约模特儿" ALIGN=RIGHT BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32> 2. 标签解释:目前常见的网页图形