第三部分：框

也许你会问，JavaScript 和框之间究竟有什么关系呢？首先让我来解释一下究竟什么是框，它们能用来作什么？然后我们来看看如何在框中应用 JavaScript。浏览器显示的窗口可以被分为几个框。这意味着，一个框就是浏览器窗口中的一个方形区域。每一个框都显示了一个文本 ( 大多是 HTML 文本)，比如你可以生成一个有两个框的 web 页，第一个框用来显示 Netscape 公司的主页，第二个框用来显示 Microsoft 公司的主页。虽然生成一个框是基本的 HTML 应用，但我会描述一下如何生成它。要生成框，你需要两个标记符： <frameset> and <frame>. 一个有两个框的 HTML 页看起来象这样：


<html>
<frameset rows="50%,50%"> 
  <frame src="page1.htm" name="frame1"> 
  <frame src="page2.htm" name="frame2"> 
</frameset> 
</html>

这会生成两个框。你能看到我们在 <frameset> 中用了它的属性 rows 。这意味着两个框是一个在一个上面。上面的框加载了 page1.htmHTML 页，下面的框显示了 page2.htm HTML 页。如果你按下了按钮，你就可以看到这个 HTML 页了：

如果你要让框并排排列而不是上下排列，那你可以在 <frameset> 中用 cols 属性代替 rows 属性。源代码中 "50%,50%" 的部分指明了两个窗口分别有多大。如果你不愿意计算剩下的部分有多大时，你也能只写 "50%,*"。你也可以直接用象素来指定大小，而不使用百分号 % 。每一个框都可以用 <frame> 的 name 属性来指定一个名字。这能帮助我们通过使用 JavaScript 来存取不同的框。

你可以使用嵌套的 <frameset> 标记符。下面这个例子是从 Netscape 公司的文档中借用来的( 我只改动了一点):


<frameset cols="50%,50%"> 
  <frameset rows="50%,50%"> 
    <frame src="cell.htm"> 
    <frame src="cell.htm"> 
  </frameset> 
  <frameset rows="33%,33%,33%"> 
    <frame src="cell.htm"> 
    <frame src="cell.htm"> 
    <frame src="cell.htm"> 
  </frameset> 
</frameset>

看一看这个例子：

你能通过使用 <frameset> 的 border 特性来设置边界的粗细。 border=0 意味着你不想要边界。( 不能在 Netscape 2.x 中使用)。

框和 Javascript

现在我们来看看 JavaScript 如何在浏览器窗口中如何使用框。让我们先来看看本页上面的第一个例子。我们已经知道 JavaScript 管理 web 页上元素的结构。这对于框也是同样的。

结构的顶上是浏览器窗口。这个窗口被分成两个框。这个窗口在这个结构中是“ 父结构”，框是“ 子结构”。我们把两个框分别命名为 frame1 和 frame2。通过这两个名字我们能在这两个框间交换信息。通过使用 Javascript 语言可以解决下面的问题：用户单击在第一个框中的一个连接，但载入的页却显示在第二个框中。这只要应用在菜单框（或引导框）中：一个框中的内容始终不变，而通过不同的连接在另一个框中展示不同的内容。我们来看看三种不同的情况：

“ 父窗口/ 框” 存取“ 子框”
“ 子框” 存取“ 父窗口/ 框”
“ 子框” 存取另一个“ 子框”

从窗口的观点来看 frame1 框和 frame2 框。你可以从上面的图中看到从“ 父窗口” 到每一个框有一个直接的连接。所以如果你在“ 父窗口”－你用来生成框的 web 页＝指定了的话，你可以通过直接使用框的名字来使用它。比如你可以这样写：


frame2.document.write("A message from the parent window.");

有时候你会想从框内使用“ 父窗口”。这主要用在你想不再使用框的时候。这也就是说在你要载入一个新的不含有框的页时。在这儿我们姑且认为是载入“ 父窗口” 的内容。我们可以在“ 子窗口”中使用 parent 来调用“ 父窗口”。为了载入一个新的页我们要通过使用 location.href 来载入一个新的 URL。为了移走框我们还必须使用“ 父窗口” 的位置对象。在各个框中要载入新的页就要使用不同的位置对象。我们能通过使用下面的命令在“ 父窗口” 中载入一个新的页：


parent.location.href= "http://...";

你经常会碰上这样的问题：如何在一个“ 子窗口” 中访问另一个“ 子窗口” 呢，如何从第一个框向第二个框内写一些东西呢－这也就是说我们究竟在 page1.htm 要用什么样的命令呢 ? 在上面的图中你可以看到在两个框间没有直接的连接。这也就是说，我们不能直接在 frame1 中直接调用 frame2，因为在 frame1 的观点来看，它并不知道存在另一个框，它只知道 parent 是“ 父窗口” 的名字。而“ 父窗口” 却知道同时存在两个框。所以我们必须使用下面的命令来访问第二个框的文本对象：


parent.frame2.document.write("Hi, this is frame1 calling.");

引导框

让我们来看看什么是引导框：在一个框中有一些连接，当你单击连接时，载入的 web 页并不在这个框中出现，它出现在第二个框中。

这是一个例子：

首先我们使用 Javascript 来生成这些框。这有点象这部分的第一个例子：

frames3.htm


<html>
<frameset rows="80%,20%"> 
  <frame src="start.htm" name="main"> 
  <frame src="menu.htm" name="menu"> 
</frameset> 
</html>

这个 start.htm 页是一开始展现在 main 框中的页，对这个页没有什么特殊的要求。下面这个页是载入在框 menu 中的页：

menu.htm


<html>
<head>
<script language="JavaScript">
<!-- hide

function load(url) {
  parent.main.location.href= url;
}

// -->
</script>
</head>
<body>

<a href="javascript:load('first.htm')">first</a>
<a href="second.htm" target="main">second</a>
<a href="third.htm" target="_top">third</a>

</body>
</html>

这儿你可以看到 main 框中载入页的不同方法。第一个连接使用函数 load()。看一看这个函数是如何被调用的：


<a href="javascript:load('first.htm')">first</a>

你可以看到我们让浏览器运行 JavaScript 代码，而不是直接载入一个页 - 我们只需要使用 href 的 javascript: 特性。括号中写的是 'first.htm'。这个字符串会传递到函数 load() 中。函数 load() 是这样定义的：


function load(url) {
  parent.main.location.href= url;
}

这儿你可以看到我们在括号中写的是 url。这意味着我们把字符串 'first1.htm' 存储在变量 url 中。现在我们可以在函数 load() 中使用这个变量。在以后我们能够看到关于变量的更多的例子。第二个连接使用了 target 特性。准确的说这并不是 JavaScript。这是 HTML 特性。你看我们只需要指定框的名字。请记住我们不需要在框的名字前放上 parent。这也许有一点令人迷惑。这样作的原因只是因为 target 是 HTML 而不是 JavaScript。第三个连接显示了如何通过使用 target 特性来移走框。如果你想通过使用函数 load() 来移走框，你只需在函数中加入 parent.location.href= url。

你准备选哪一种方法呢？这要由你自己来决定了。 target 特性十分简单。如果你只是想在另一个框中载入一个页的话就用它吧。 JavaScript 代码 ( 就象第一个连接 ) 经常用在当你单击一个连接后会产生一系列的反应时。比如同时在两个框中载入两个页。虽然你也可以通过使用 target 来解决这个问题，担使用 JavaScript 函数更直接。让我们假定你有三个框，分别是 frame1，frame2 和 frame3。用户单击了 frame1 中的一个连接后，你想在另两个不同的框中载入两个不同的页。你可以使用这样一个函数：


function loadtwo() {
  parent.frame1.location.href= "first.htm";
  parent.frame2.location.href= "second.htm";
}

如果你想使这个函数更通用，你可以在这儿使用变量，就象下面这样：


function loadtwo(url1, url2) {
  parent.frame1.location.href= url1;
  parent.frame2.location.href= url2;
}

现在你能够这样调用这个函数 loadtwo("first.htm", "second.htm") 或者 loadtwo("third.htm", "forth.htm")。变量可以使你的函数通用性更好。你可以在以后反复使用它。