荔园在线

荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀

[回到开始] [上一篇][下一篇]

发信人: hbo (H.B.), 信区: Java
标  题: (转贴)JavaScript 简介(第 3 集)
发信站: 深大荔园晨风站 (Thu Mar 12 09:39:46 1998), 转信

寄信人: VINCENT
标  题: (转贴)JavaScript 简介(第 3 集)
发信站: 华南理工大学 BBS木棉站
日  期: Tue Oct 15 19:02:45 1996

许多人会问∶如何将 JavaScript 与视窗框 (frames)
结合一起工作呢？首先，你必需

先准备有 Netscape 2.0 以上的 WWW
浏览软体才成。或是另外也有一些已支援

frame 功能的浏览器如∶Oracle 的
PowerBrowser，不过这个浏览器目前只 beta 版

，而且也还无法在上面执行 JavaScript 的程式。



我们先来谈一谈有关 frame 功能。 frame 是 Netscape
公司所定出的一个新的

HTML
标记，它可以将一个视窗切成几个不同的部份，所以你可以在一页


视窗中，同时拥有许多不同而独立的部分，然後将你的文件放到这些不同的


”frame”上，而且这些不同的 frame
彼些间还可以沟通。例如∶你可以利用

frame
将原来的一个视窗分为两个部分，一部分为正常的文件内容，另一部份则


用来当做自制的工具按钮区，工具按钮区可以一直维持不变，而文件内容则依


所选到的项目或功能来加以读入不同的 HTML 文件。

首先让我们先来看看 frame 的样子，请按以下的按钮！





以下便是此一 frame 的 HTML 语法！


<HTML>

<HEAD>

<title>Frames</title>

</HEAD>

<FRAMESET ROWS="50%,50%">

<FRAME SRC="frtest1.htm" name="fr1">

<FRAME SRC="frtest2.htm" name="fr2">

</FRAMESET>

</HTML>


　　你要先以 <frameset...>
的标记来告诉浏览器你要开几个区域，如何开法？

是横切呢？还是直切？横切的话就要用 rows
来表示，直切的话则以 cols 代替

之。而且你也可以用多层式的 <frameset...>
标记来同时直切与切横你的视窗。

以下是 Netscape公司所提供的一个例子∶



<FRAMESET COLS="50%,50%">

<FRAMESET ROWS="50%,50%">

<FRAME SRC="cell.html">

<FRAME SRC="cell.html">

</FRAMESET>

<FRAMESET ROWS="33%,33%,33%">

<FRAME SRC="cell.html">

<FRAME SRC="cell.html">

<FRAME SRC="cell.html">

</FRAMESET>

</FRAMESET>



在这个例子中，即是将视窗先直切成两个区域然後在第一个区域中再横切


为两个子区域，而第二个区域中再横切为相等大小的 3
个区域。第一个

<frameset> 标记中的 50% , 50%
即是在告诉浏览器所切的区域大小。

每一个 frame 均可以有他自己的名称，这对 JavaScript
来说是很重要的。

在以上的第一个例子中，我们在 <frame> 标记中就加入了该 frame
的名称

(name...)以及所要读入这个 frame 中的文件名称(SRC="....")




我想以上 frame
的基本用法是很容易了解的,不是吗？！现在请注意下一个例子

在这个例子中，你将可以由按一个视窗中的按钮产生一些文字至另一个视窗


中。我们来看看它的原始程式∶

主要程式为 frames.htm:


<HTML>

<HEAD>

<title>Frames</title>

</HEAD>

<FRAMESET ROWS="50%,50%">

<FRAME SRC="frame1.htm" name="fr1" noresize>

<FRAME SRC="frame2.htm" name="fr2">

</FRAMESET>

</HTML>


以下是 frame1.htm 的档案内容:


<HTML>

<HEAD>

<script language="JavaScript">

<!-- Hiding

function hi() {

document.write("哈罗!");

}

function yo() {

document.write("耶!");

}

function bla() {

document.write("啦! 啦! 啦!");

}

// -->

</script>

</HEAD>

<BODY>

这是第 1 个视窗框!

</BODY>

</HTML>



而 frame2.htm 的档案内容为:


<HTML>

<body>

这是第 2 个视窗框!





<FORM NAME="buttonbar">

<INPUT TYPE="button" VALUE="哈罗" onClick="parent.fr1.hi()">

<INPUT TYPE="button" VALUE="耶" onClick="parent.fr1.yo()">

<INPUT TYPE="button" VALUE="啦啦啦" onCLick="parent.fr1.bla()">

</FORM>

</BODY>

</HTML>

哇塞！这个东东这么长哪！怎么看哩？别怕，使用者通常首先读入的


档案会是 frames.htm，这个文件会建立基本的视窗框，然後将
frame1.htm

这个文件读入放到第一个视窗框中，接著， frame2.htm
将被读入并放於

第二个视窗框中，而第一个视窗框的名称叫做
"fr1"，第二个视窗框的名称

为 "fr2"．如同你所看到的原始文件 frame1.htm ， 面包含了几个
JavaScript

中被呼叫而将执行结果显示在视窗框⒈中．如果你已读过了第 1
集中，

按钮的功能与制作，那你应该会了解在 frame2.htm 中OnClick 这个
property

的用法，如果尚不了解，那可以先去看看再回来继续．

假设你已会了的话，那另一个问题是∶OnClick 後的
"parent.fr1"....是什么

意思呢？这个问题我们要以物件 (object)
的观点来告诉你，你如果对於物件

的观念已经相当清楚的话，那就不难搞懂，不过如果你不懂所谓的”物件”


，那也没关系，我们会可能会说得简单易懂一些；如同你刚刚所看到的，


frame1.htm 与 frame2.htm 是由 frames.htm
所呼叫而读入的文件，此时我们便

称为 frames.htm 即是其他另二个文件档的父辈 (parent)，相对的，
frame1.htm

与 frame2.htm 则称为 frames.htm 文件的子辈
(child)．这个关系由以下的图中可

以让你很清楚的了解他们彼此间的关系:




              frames.htm                parent





               /      \





              /        \





             /          \





  fr1(frame1.htm)     fr2(frame2.htm)   children





现在把以上的观念再推广一下，我们可以得到所谓的孙辈
(grandchildren) 关系，

(注意，这 只是说明而已， grandchilden 并非 JavaScript 正式的
property 名称)





              frames.htm                parent





               /      \





              /        \





             /          \





  fr1(frame1.htm)     fr2(frame2.htm)   children





          /  \





         /    \





        /      \





    gchild1  gchild2                    'grandchildren'





所以我们如果要子辈文件 frame2.htm
中指到父辈视窗的任何东西的话，

只要将你所要呼叫的函数之前加上一个 parent
即可．由於所呼叫的函数

为放在 frame1.htm 的文件中，而 frame1.htm 此文件是放於名称为
fr1的视窗

框之中，所以要经由 frame2.htm 文件去呼叫 frame1.htm
文件中的函数即是要

由视窗框 fr2 去呼叫 fr1 中的函数意思一样．从以上的图中可以知道
fr1

与 fr2 彼此间并无直接的关系可以相通，所以只好藉由父辈的
frames.htm

来完成．因此如果你想在 frame2.htm 中呼叫 yo( )，那就写成
parent.fr1.yo( )

即可！所以 OnClik 後的部份所写的意思即是如此！
在此顺便要告欣你的是∶我们在这儿用<Script
langiage="JavaScript">来代替前

几集的<script
tanguage="LiveScript">，其实这在目前而言并没有任何差别，

因为 Netscape 浏览器在将 "Javascript" 植入时,起先叫做
"LiveScript"，然而由於

後来此一语法被定名为 JavaScript ，所以我们认为还是写成
JavaScript 比较好，

以免以後有不同的语法被定义出时，会混淆了！(目前对此仍有许多的争议


存在， LiveScript 到底是什么呢？这是我们的解释罢了！)





最後，一个常常在用到 frame
时令人头痛的问题就是∶在视窗框中万一所

连结到的文件并非是我们自已要放在此一视窗框上的文件，而是别人或别


地方的文件，而且该文件应该是由全萤幕的视窗来表现的现在却被我们所


建的视窗框弄得十分难看，那该如何是好呢？其实很简单，你只要将


<a href....>的标记中加入 TARGET=_top 即可例如∶

<a href="goaway.html" TARGET=_top>不再使用原视窗框</a>

这个意思就是告诉浏览器以原始完整的全萤幕视窗来显示
goaway.html 文件。





最後再提醒您
如果您的视窗框中有连至外站的文件部份，别忘了，加上
TARGET=_top 喔！



第 3 集 完

--
※ 来源:．深大荔园晨风站 bbs.szu.edu.cn．[FROM: 202.192.140.143]

[回到开始] [上一篇][下一篇]

荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店