曾有许多网友问我有关JavaScript与框架(为求方便

源代码在线查看: javascr3.html

软件大小: 64 K
上传用户: dingjuan_01
关键词: JavaScript 多网
下载地址: 免注册下载 普通下载 VIP

相关代码

				
				
				
				
				Introduction to JavaScript - Part3
				
				
				
				
								
				function WinOpen(url) {
				
				   msg=open(url,"DisplayWindow","toolbar=yes,directories=no,menubar=no");
				
				}
				
				     function stat(txt) {
				
				        window.status = txt;
				
				        setTimeout("erase()",1500);
				
				      }
				
				     function erase() {
				
				       window.status="";
				
				     }
				
				// -->
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				JavaScript简介第三章
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				曾有许多网友问我有关JavaScript与框架(为求方便,以下均用frame表示)合用的问题。事实上,
				若您同时想用frames和JavaScript的功能,首先您必需拥有Netscape Navigator 2.0 (或以上)浏览器(
				至少目前是如此)。当然也有某些浏览器支援frames的功能--如:Oracle开发的PowerBrowser,但此
				浏览器还只是Beta版,目前尚不支援JavaScript。
				首先,我稍微解释一下frames的功用。因为frames功能才开发不久,仍有许多HTML文件中未使
				用这项新功能。Frames最主要功用是"分割"您的视窗,使每个"小视窗"(frame)能显示不同的HTM
				L文件(译按:这有点类似电视的子母画面)。更妙的是,不同frame之间可以互动(interact),也就是
				说不同frame之间可以交换讯息与资料(information)。例如:假设您开了两个frames,第一个frame可
				显示普通HTML文件,第二个frame可显示工具列(toolbar)。此工具列中可包含浏览您homepage所
				需的各种按钮。如此一来,即使第一个frame载入了另一个HTML文件,您仍可在第二个frame中
				看到工具列。
				现在我先将上述特性展示给您瞧瞧。请按一下下面的按钮,看一看frames的长相。(如果您是线
				上观看此文件,您可能需稍候一下才看得到结果,因为scripts必需由server中载入到您的机器)。
				
				
				
				
				
				
				
				
				以下是此frame的写法:
				
				
				
				
				
				<HTML>
				
				<HEAD>
				
				<title>Frames</title>
				
				</HEAD>
				
				    <FRAMESET ROWS="50%,50%"> 
				
				    <FRAME SRC="frtest1.html" name="fr1"> 
				
				    <FRAME SRC="frtest2.html" name="fr2"> 
				
				  </FRAMESET> 
				
				</HTML>  
				
				
				
				
				首先您必须告诉浏览器您要开几个frame?这是由 <frameset...> 这个标签(tag)来宣告。rows这项
				参数是告诉浏览器您想将视窗分割成几列?而 cols这项参数是告诉浏览器您想将视窗分割成几
				行?您也可以用很多组的 <frameset...> tags 将视窗分割得更复杂。以下是 Netsacpe所提到的一个
				范例:
				
				
				
				
				
				<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> 
				
				
				
				
				
				
				
				
				
				
				上面这个例子产生了两行,而且第二行又分割成三列大小相等的空间。在第一个 <frameset> tag
				中的 50%,50% 两项参数是用来表是frame的大小。
				您可以给每个frame一个"名字" (name)。frame的名字在JavaScript语法中的地位非常重要。在本
				章的第一个范例中您已学到如何替frame命名。接下来您可以用 <frame> tag 告诉浏览器您要载
				入哪一个 HTML文件。
				
				
				
				
				我想您已了解frames的基本用法,接下来我们再看一个有趣的范例:
				
				
				
				
				
				
				
				
				上面的按钮将显示 : 按某个frame中的按钮後,会在另一frame中写入文字。
				以下是此功能的原始码:
				
				
				
				在产生frames效果之前,您需先制作下列原始码 (frames.html):
				
				
				
				
				
				<HTML>
				
				<HEAD>
				
				<title>Frames</title>
				
				</HEAD>
				
				    <FRAMESET ROWS="50%,50%"> 
				
				    <FRAME SRC="frame1.html" name="fr1" noresize> 
				
				    <FRAME SRC="frame2.html" name="fr2"> 
				
				  </FRAMESET> 
				
				</HTML>
				
				
				
				
				
				以下是 frame1.html 的原始码:
				
				
				
				
				
				<HTML>
				
				<HEAD>
				
				<script language="JavaScript">
				
				<!-- Hiding
				
				     function hi() {
				
				       document.write("嗨!<br>");
				
				     }
				
				     function yo() {
				
				       document.write("呦!<br>");
				
				     }
				
				     function bla() {
				
				       document.write("啦 啦 啦<br>");
				
				     }
				
				// -->
				
				</script>
				
				</HEAD>
				
				<BODY>
				
				这是第一个 frame!
				
				</BODY>
				
				</HTML>
				
				
				
				
				
				以下是 frame2.html 的原始码:
				
				
				
				
				
				<HTML>
				
				<body>
				
				这是第二个 frame!
				
				<p>
				
				<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.html)後
				,将会产生两个frame,并且在第一个frame(命名为 'fr1')中载入frame1.html,而在第二个frame (
				命名为 'fr2')中载入frame2.html。到目前为止都只是普通的 HTML 语法。或许您已发现在
				frame1.html中包含了JavaScript语法,但此JavaScript并没有马上被执行。难到这些函式(functions)
				是不必要的?亦或是我懒得删除这些不必要的函式?虽然我是懒散惯的人,但这些函式确实是必
				须的。它们是被位於frame2.html中之JavaScript语法所呼叫而执行的。我在frame2.html中利用Java
				Script语法制作了三个按钮,制作按钮来呼叫函式的方法我已在第一章提过,相信您对onClick的
				用法已相当熟悉。但是...... parent.fr1 是干嘛用的?
				若您对物件观念已相当了解,相信它对您不是甚麽新鲜事。您可以看到frames.html同时呼叫 frame1.html 
				与 frame2.html两个档案,所以frames.html称为frame1.html与frame2.html的 parent (请
				恕我直接用英文)。同理,这两个新的frame就称为frames.html的 child- frames。您可将这种复杂
				的关系想像成阶层式架构(hierarchy)。以下我借助一个小 '图' 来厘清这种关系:
				
				
				
				
				
				              frames.html                parent
				
				               /      \
				
				              /        \
				
				             /          \
				
				  fr1(frame1.html)     fr2(frame2.html)   children
				
				
				
				
				
				当然您可依此类推,产生一些 'grandchildren' frames。 (当然,这并不是正式的名称):
				
				
				
				
				
				              frames.html                parent
				
				               /      \
				
				              /        \
				
				             /          \
				
				  fr1(frame1.html)     fr2(frame2.html)   children
				
				          /  \
				
				         /    \
				
				        /      \
				
				    gchild1  gchild2                    'grandchildren'      
				
				
				
				
				若您想由frame2.html呼叫parent- frame中的任何函数,您只要将 parent 放在您欲呼叫函数名称之
				前即可。同理,若由parent- frame呼叫位於frame1.html中的函数,您只需将 fr1 放在被呼叫函数
				名称之前。为什麽用 fr1 呢?原因是我们在frames.html中开了两个frame,而且将它们分别命名为
				fr1和 fr2。所以我用 fr1 代表第一个frame (frame1.html)。接下来的步骤就相当容易了。当我们欲
				由frame2.html ( 命名为 fr2)呼叫第一个frame中的函式时该怎麽做?由上面的"小图"您可以发现,
				frame1.html 和frame2.html之间并无直接关连 (connection),因此您不可以"直接"由frame2.html呼
				叫位於 frame1.html中的函式。您必须透过parent- frame来呼叫它,所以正确指标(index)应为
				parent.fr1。例如若您想由frame2.html呼叫 hi(),您必须写成 parent.fr1.hi()。这也就是为什麽
				frame2.html中的 onClick要写成那种样子的原因了。
				
				对了!附带提一点小东西。您或许已发现本章中都用<script language="JavaScript">代替前两章用
				的<script language="LiveScript">。其实此二者间并没什麽差别。但起初JavaScript被植入Netscape
				浏览器时,您只能用LiveScript语法。(这是一种由Netscape发展的旧语法,和JavaScript极为类似
				)。我想既然我们讨论的是JavaScript函式,就应使用JavaScript语法。 (这只是我的一己之见,在
				'JavaScript- society'中有许多关於LiveScript的讨论,目前也是众说纷纭....)
				
				
				
				
				
				在此我要花一点时间讨论一个很多人关心的问题。当您观赏一个拥有数个frame的网页时,若您
				想link至internet其它网页,这些frame并不会消失而且会带来视觉上的干扰。这些讨厌的frame应
				该如何消除呢?
				您只要在您的<a href...> tag中加入TARGET="_top" 就可解决这个困扰。方法如下:
				<a href="goaway.html" TARGET="_top">如果您不想观赏我的网页了</a>  
				
				
				当然,您必须在您想要获得此效果的link中都加入TARGET="_top" 。若想要整个网页中的link
				都有此效果,您可在此网页的head中加入<base target="_top">较方便。如此一来每个link被按下
				後都可将frame消除。
				
				
				
				
				
				
				
				
				
				返回主页 -
				
				
				
				
				
				
				
				
				
							

相关资源