frontpage98-设计web站点

您的位置

JavaScript

第六集

许多网友问我一个有趣的问题:如何用mouse按一下便可同时载入两页文件。基本上有三种方法可以达到这种功能。第一种方法是制作一个按钮，让使用者按下後去启动一个能同时将两份文件载入不同frames或新视窗的函式(function)。若您曾经看过此份简介文件的其它章节的话，我相信您可以很轻易写出这种语法:

我们制作了三个frame，第一个frame中包含了一个按钮。请注意，第一个HTML档案只是用来打开frame和给予每个frame一个名字。若您还不清楚JavaScript和frame的关系，可以先阅读第三章。不过在此还是照例让您瞧瞧原始码(不知您是否在很多电脑书籍中遇到一个相同的困扰，那就是作者常把一些自认很简单的东西忽略不提，结果那些东西正是读者搞不懂的地方!所以，若您对我提的东西已很了解，请发挥一下您的耐性:-)

frames2.html


<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*"> 
  <FRAMESET ROWS="100%,*"> 
    <FRAME SRC="loadtwo.html" NAME="fr1"> 
      </FRAMESET> 
  <FRAMESET ROWS="75%,25%"> 
    <FRAME SRC="cell.html" NAME="fr2"> 
    <FRAME SRC="cell.html" NAME="fr3"> 
      </FRAMESET> 
</FRAMESET> 
</HTML>

第一个frame会载入loadtwo.html并产生一个按钮:

loadtwo.html


<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="同 时 载 入 两 份 文 件" 
 onClick="loadtwo('frtest1.html', 'frtest2.html')">
</FORM>
</BODY>
</HTML>

按下按钮後，电脑会传递两个字串给loadtwo()并将之启动。由loadtwo()中可以看出，第一个字串是用来定义第二个frame fr2所载入文件的位址和档案名。若您想定义另外的按钮来载入不同的文件，您可以重复使用此函式。只要将文件的URLs (addresses)传给loadtwo()即可。

接下来谈谈用hyperlinks同时载入两页文件的第二种方法。在Internet上您可以发现许多网页使用<a href="yourlink.html" onCLick="yourfunction()">来达到上述提及的功能。但此语法并不能在所有平台上均正常执行，因此最好不要用此语法。现在我告诉您另一种写法:我们可改用下述JavaScript语法:


<a href="javascript:myfunction()">My Link</a>

此种方式非常简单而且在所有浏览器中均能正常执行。您只要写上javascript:并加上您想联结的函式名即可。若此函式名称设为'loadtwo()'，那您就可藉由按下此hyperlink来达到同时载入两份文件的目的了。

再接着谈谈用mouse按一下便可同时载入两页文件的第三种方法，此方法可以以hyperlinks或按钮来执行。您可先在第二个frame中载入一个HTML文件: <a href="getfr2.html" target="fr2">请按这里!</a>然後在此文件中(getfr2.html)加入onLoad这项指令，用来触发第三个frame载入另一份文件。如此一来便可同时载入两份文件。getfr2.html档的原始码如下:


<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.html'; return true;">
文 件 内 容.....。
</body>
</html>

当然，您必须在所有会被载入到第二个frame的文件中加入onLoad这项指令。

另一个常遇见的问题是如何开一个新视窗并载入文件?我们想达到的效果是当使用者按一下mouse便会'弹'出一个新视窗。很简单，只要在<a href...>中利用target这项特性就可达到此效果。例如:
<a href="goanywhere.html" target="Resource Window">Go!</a>

现在我将谈谈在JavaScript中几种常用的运算子(operator)。运算子可以使您的JavaScript语法更精简。假设您想测试变数x是否大於3且小於10，您可写成:


if (x>3) 
  if (x<10) doanything();

当满足x>3且x<10时，就会执行doanything()。还有一种更精简的写法:


if (x>3 && x<10) doanything();

' &&'称为AND-运算子。还有另一种被称为OR-运算子的东东可让您用来检视是否变数x等於5或变数y等於17 :


if (x==5 || y==17) doanything();

当满足x==3或y==17时，就会执行doanything()。当然，当两者皆成立时也会执行doanything()。在JavaScript中是利用==来做比较的工作(其它尚有<，>，<=和>=)，这些都和C/C++的语法相同。另外单一'='是用来将数值存入变数用的。(在Pascal语法中将数值指定给变数是用:=，而做比较是用单一的'='，这和JavaScript语法有点不同)若您想利用'不等於'这项特性，您可以用!=。例如: x != 17.

尚有许多可以精简您的JavaScript语法的运算子，去翻翻Netscape的文件吧!