第 三 集
| 曾 有 許 多 網 友 問 我 有 關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的 大 小。 我 想 您 已 了 解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消 除。 |
回 主 目 錄
原 作 最 後 更 新: 18.March'96
© 1996 by Stefan Koch
譯 作 最 後 更 新:1996年5月16日
© 1996 由 段 喜 亭 翻 譯