?? introduction to javascript - part3.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0058)http://homepage.qdcatv.com.cn/lkw/javascript/javascr3.html -->
<HTML><HEAD><TITLE>Introduction to JavaScript - Part3</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
<!-- Hide
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="";
}
// -->
</SCRIPT>
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY background="Introduction to JavaScript - Part3.files/ee.jpg"><FONT
color=#ff0000 size=6>
<CENTER>JavaScript簡介</FONT><FONT color=#ff0000
size=4><BR>第三章</CENTER></A></FONT>
<P>
<HR align=center width="50%">
<P><BR><BR>
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD><FONT
size=+1>曾有許多網友問我有關JavaScript與框架(為求方便，以下均用frame表示)合用的問題。事實上，若您同時想用frames和JavaScript的功能，首先您必需擁有Netscape
Navigator 2.0 (或以上)瀏覽器(
至少目前是如此)。當然也有某些瀏覽器支援frames的功能--如:Oracle開發的PowerBrowser，但此瀏覽器還只是Beta版，目前尚不支援JavaScript。
<P>首先，我稍微解釋一下frames的功用。因為frames功能才開發不久，仍有許多HTML文件中未使用這項新功能。Frames最主要功用是"分割"您的視窗，使每個"小視窗"(frame)能顯示不同的HTM
L文件(譯按:這有點類似電視的子母畫面)。更妙的是，不同frame之間可以互動(interact)，也就是說不同frame之間可以交換訊息與資料(information)。例如:假設您開了兩個frames，第一個frame可顯示普通HTML文件，第二個frame可顯示工具列(toolbar)。此工具列中可包含瀏覽您homepage所需的各種按鈕。如此一來，即使第一個frame載入了另一個HTML文件，您仍可在第二個frame中看到工具列。
<P>現在我先將上述特性展示給您瞧瞧。請按一下下面的按鈕，看一看frames的長相。(如果您是線上觀看此文件，您可能需稍候一下才看得到結果，因為scripts必需由server中載入到您的機器)。
<P>
<FORM><INPUT onclick="WinOpen('frtest.html')" type=button value=請按這里 name=Button1>
</FORM>
<P>以下是此frame的寫法:
<P><PRE>
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.html" name="fr1">
<FRAME SRC="frtest2.html" name="fr2">
</FRAMESET>
</HTML>
</PRE>
<P>首先您必須告訴瀏覽器您要開幾個frame?這是由 <frameset...>
這個標簽(tag)來宣告。<I>rows</I>這項參數是告訴瀏覽器您想將視窗分割成幾列?而
<I>cols</I>這項參數是告訴瀏覽器您想將視窗分割成幾行?您也可以用很多組的 <frameset...> tags
將視窗分割得更復雜。以下是 Netsacpe所提到的一個范例:
<P><PRE>
<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>
</PRE>
<P>
<FORM><INPUT onclick="WinOpen('nsexmpl.html')" type=button value=試試這個按鈕 name=Button2>
</FORM>
<P>上面這個例子產生了兩行，而且第二行又分割成三列大小相等的空間。在第一個 <frameset> tag 中的 50%，50%
兩項參數是用來表是frame的大小。<BR>您可以給每個frame一個"名字"
(name)。frame的名字在JavaScript語法中的地位非常重要。在本章的第一個范例中您已學到如何替frame命名。接下來您可以用
<frame> tag 告訴瀏覽器您要載入哪一個 HTML文件。
<P><BR>
<HR align=center width="80%" SIZE=2>
<P>我想您已了解frames的基本用法，接下來我們再看一個有趣的范例:
<P>
<FORM><INPUT onclick="WinOpen('frames.html')" type=button value=快試試這里 name=Button3>
</FORM>
<P>上面的按鈕將顯示 : 按某個frame中的按鈕後，會在另一frame中寫入文字。<BR>以下是此功能的原始碼:
<P><I>在產生frames效果之前，您需先制作下列原始碼 (frames.html):</I>
<P><PRE>
<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>
</PRE>
<P><I>以下是 frame1.html 的原始碼:</I>
<P><PRE>
<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>
</PRE>
<P><I>以下是 frame2.html 的原始碼:</I>
<P><PRE>
<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>
</PRE>
<P>哇!這些語法越來越長了!上述的語法是如何運作的呢?當使用者載入第一個檔案
(frames.html)後，將會產生兩個frame，并且在第一個frame(命名為 'fr1')中載入frame1.html，而在第二個frame
( 命名為 'fr2')中載入frame2.html。到目前為止都只是普通的 HTML 語法?；蛟S您已發現在
frame1.html中包含了JavaScript語法，但此JavaScript并沒有馬上被執行。難到這些函式(functions)
是不必要的?亦或是我懶得刪除這些不必要的函式?雖然我是懶散慣的人，但這些函式確實是必須的。它們是被位於frame2.html中之JavaScript語法所呼叫而執行的。我在frame2.html中利用Java
Script語法制作了三個按鈕，制作按鈕來呼叫函式的方法我已在第一章提過，相信您對onClick的用法已相當熟悉。但是......
parent.fr1 是干嘛用的?
<P>若您對物件觀念已相當了解，相信它對您不是甚麼新鮮事。您可以看到frames.html同時呼叫 frame1.html 與
frame2.html兩個檔案，所以frames.html稱為frame1.html與frame2.html的 parent
(請恕我直接用英文)。同理，這兩個新的frame就稱為frames.html的 child-
frames。您可將這種復雜的關系想像成階層式架構(hierarchy)。以下我借助一個小 '圖' 來厘清這種關系:
<P><PRE>
frames.html parent
/ \
/ \
/ \
fr1(frame1.html) fr2(frame2.html) children
</PRE>
<P>當然您可依此類推，產生一些 'grandchildren' frames。 (當然，這并不是正式的名稱):
<P><PRE>
frames.html parent
/ \
/ \
/ \
fr1(frame1.html) fr2(frame2.html) children
/ \
/ \
/ \
gchild1 gchild2 'grandchildren'
</PRE>
<P>若您想由frame2.html呼叫parent- frame中的任何函數，您只要將 <I>parent</I>
放在您欲呼叫函數名稱之前即可。同理，若由parent- frame呼叫位於frame1.html中的函數，您只需將 <I>fr1</I>
放在被呼叫函數名稱之前。為什麼用 <I>fr1</I> 呢?原因是我們在frames.html中開了兩個frame，而且將它們分別命名為
<I>fr1</I>和 <I>fr2</I>。所以我用 <I>fr1</I> 代表第一個frame
(frame1.html)。接下來的步驟就相當容易了。當我們欲由frame2.html ( 命名為
<I>fr2</I>)呼叫第一個frame中的函式時該怎麼做?由上面的"小圖"您可以發現， frame1.html
和frame2.html之間并無直接關連 (connection)，因此您不可以"直接"由frame2.html呼叫位於
frame1.html中的函式。您必須透過parent- frame來呼叫它，所以正確指標(index)應為
parent.fr1。例如若您想由frame2.html呼叫 hi()，您必須寫成 parent.fr1.hi()。這也就是為什麼
frame2.html中的 onClick要寫成那種樣子的原因了。
<P>對了!附帶提一點小東西。您或許已發現本章中都用<script
language="JavaScript">代替前兩章用的<script
language="LiveScript">。其實此二者間并沒什麼差別。但起初JavaScript被植入Netscape
瀏覽器時，您只能用LiveScript語法。(這是一種由Netscape發展的舊語法，和JavaScript極為類似
)。我想既然我們討論的是JavaScript函式，就應使用JavaScript語法。 (這只是我的一己之見，在 'JavaScript-
society'中有許多關於LiveScript的討論，目前也是眾說紛紜....)
<P>
<HR align=center width="80%" SIZE=2>
<P>在此我要花一點時間討論一個很多人關心的問題。當您觀賞一個擁有數個frame的網頁時，若您想link至internet其它網頁，這些frame并不會消失而且會帶來視覺上的干擾。這些討厭的frame應該如何消除呢?
<P>您只要在您的<a href...> tag中加入TARGET="_top" 就可解決這個困擾。方法如下:<BR><PRE><a href="goaway.html" TARGET="_top">如果您不想觀賞我的網頁了</a></PRE>
<P>當然，您必須在您想要獲得此效果的link中都加入TARGET="_top" 。若想要整個網頁中的link
都有此效果，您可在此網頁的head中加入<base
target="_top">較方便。如此一來每個link被按下後都可將frame消除。
</P></FONT></TD></TR></TBODY></TABLE></CENTER>
<P>
<HR align=center width="80%" SIZE=2>
<P><BR>
<CENTER>
<H4><A onmouseover="stat('回到主頁'); return true"
href="http://homepage.qdcatv.com.cn/lkw/javascript/script.htm"
tppabs="http://202.96.217.5/~xiaoyi/script.htm">返回主頁</A> - </H4></CENTER>
<P></P></BODY></HTML>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -