javascript學習隨筆(使用window和frame)的技巧

JavaScript允許建立和開啟代表HTML文本, form對象和frame的視窗. window對象是JavaScript客戶階層的最頂層對象, form元素和全部JavaScript代碼都是存在於文檔中,而文檔被裝載進視窗. 為了理解視窗怎樣工作,你可以控制操作這些視窗.

開啟和關閉視窗
當使用者啟動(launch)Navigator時,將自動建立一個視窗.使用者還可以使用Navigator的File菜單上的New Web Browser開啟一個視窗, 可以用Navigator的File菜單的Close或Exit關閉一個視窗.也可以用程式的辦法來開啟或關閉一個視窗.

開啟視窗
用方法open建立一個視窗.下面語句建立了一個名為msgWindow的視窗,並在該視窗內顯示檔案sesame.html的內容.

msgWindow=window.open("sesame.html")

下面的這個語句能夠建立一個名為homeWindow的視窗,用於顯示Netscape的home page.

homeWindow=window.open("http://www.netscape.com")

視窗可以有兩個名字.下述語句建立了一個有兩個名字的視窗,第一個名字為msgWindow用於引用視窗的屬性,方法和內含項目關聯性, 第二個名字displayWindow用於把視窗作為form提交 或超文本鏈的對象來引用時.

建立視窗時,並不要求一定給出視窗名.但是你若打算從另一個視窗中引用此視窗,則此視窗必須有一個名字.有關使用視窗名字的資訊參見windows and frames有關資料.

開啟視窗時,可以指定視窗屬性,如視窗的高度,寬度,是否包含工具條,location域或捲軸等等.下述語句建立了一個沒有工具條但帶有捲軸的視窗.

msgWindow=window.open
("sesame.html","displayWindow","toolbar=no,scrollbars=yes")

有關視窗的屬性的細節請參見OPEN 方法.

關閉視窗
可以在程式中使用方法close來關閉一個視窗.不允許只關閉一個frame, 而不關掉整個父視窗.

下述語句均可關閉當前視窗:

window.close()
self.close()
//此語句不能用在事件處理常式中
close()

下述語句關閉了一個名為msgWindow的視窗:

msgWindow.close()

--------------------------------------------------------------------------------

使用frame
frame是一種特殊的視窗,它可以在一個視窗顯示多個獨立滾動的frame.每個frame又有各自不同的URL. 各frame可以指向不同的URL,也可以作為其它URL目標,但必須在同一個視窗內. 一系列的frame 組成頁(page).

是一個含有三個frame的視窗

This frame is This frame is
named listFrame named contentFrame

| |
-----------------v-----------------------------------v------------
| Music Club | Toshiko Akiyoshi |
| Artists | Interlude |

| Jazz | The Beatles |
| - T. Akiyoshi | Please Please Me |
| _ J. Coltrame | |
| - M. Davis | Betty carter |
| - D. Gordon | Ray Charles and Betty Carter |

| Soul | Jimmy Cliff |
| - B. Carter | The Harder They Come |
| _ R. Charles | |
| ... | ... |
------------------------------------------------------------------
| Alphabetical By category Musician Descriptions |
-----------------^------------------------------------------------

|
This frame is named
navigateFrame
建立一個frame
在HTML文檔中使用<frameSET>標記就可以建立一個frame. <frameSET>標記在HTML文檔中的唯一作用就是定義組成頁的各個frame的布局(layout).

例1 下述語名定義了所示的一組frame

<FRAMESSET ROWS ="90%,10%">
　<FRAMESET COLS="30%,70%">
　　　<FRAME SRC=category.html NAME="listFrame">
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　　<FRAME SRC=titles.html NAME="contentFrame>
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　</FRAMESET>
　<FRAME SRC =navigate.html NAME="navigateFrame">
</FRAMESET>

給出了這些frame的階層,雖然有兩個frame是在另一個frameset中定義的,但這三個frame有同一個父親, 這是因為frame的父親是它的父視窗,而視窗是由frame而不是frameset確定的.

top

+--listFrame (category.html)

+--contentFrame(titles.html)

+--navigateFrame(navigate.html)
你也可以數組frames引用上述的frame(有關數組frames的資訊參見frame對象):
listframe 用 top.frame[0]表示
contentframe 用 top.frame[1]表示
navigateframe 用 top.frame[2]表示
例2 可以用另一個辦法建立上述視窗: 最前面的兩個frame與navigateFrame各有不同的父輩,頂層的frameset定義如下:

<FRAMESSET ROWS ="90%,10%">
　　<FRAME SRC=muske13.htm NAME="upperFrame">
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　<FRAME SRC=navigate.html NAME="navigateFrame>
ALT="BACKWARD" HEIGHT=32 WIDTH=32> </FRAMESET>

檔案muskel3.html包含了上述frame的骨架,並定義了下述frameset.

<FRAMESSET COLS ="30%,70%">
　　<FRAME SRC=categroy.html NAME="listFrame">
ALT="BACKWARD" HEIGHT=32 WIDTH=32> 　　<FRAME SRC=titles.html NAME="contentFrame>
ALT="BACKWARD" HEIGHT=32 WIDTH=32> </FRAMESET>

說明了這幾個frame的層次關係upperFrame和navigateFrame共用一個父輩:最頂的window. 而listFrame和contentFrame共用一個父輩:upperFrame.

top

| +--listFrame
| | (category.html)
+---upperFrame-----------|
| (muske13.html) |
| +--contentFrame
| (titles.html)

+--navigateFrame
(navigate.html)
可以用下面的辦法引用這些frame(關於frame數組的資訊參見frame對象).
upperFrame 用 top.frame[0]表示
navigateFrame 用 top.frame[1]表示
listFrame 用 upperFrame.frames[0] 或top.frames[0].frames[0]表示
contentFrame 用upperFrame.frames[1] 或top.frames[0].frames[1]表示
更新frame(updating frames)
只要你說明了frame階層,你可以用location屬性來設定URL, 以更新frame的內容.

例如,在使用上節例2中frameset時,若希望使用者能夠關閉含有字母序或分類序的畫家列表的frame(名為listframe),且只想看到按作曲家排序的作品標題(在contentFrame中), 則可以向navigateFrame 中加入如下按鈕.

<INPUT TYPE="button" VALUE="Titles Only"
onClick="top.frames[0].location='artists.html'">

當使用者按動此按鈕時,檔案artist.html被載入到名為upperFrame的frame中,而listFrame和contentFrame被關閉,且不再存在.

引用frame和在frame之間瀏覽(navigate)
因為frame是一種視窗,所以你可以與使用視窗類別似的辦法引用frame和在frame 之間瀏覽.

frame的例子
在上一節中, 若frameset被設計為一個音樂俱樂部的可用的標題,則這些frame及其HTML檔案包括下述的內容:

category.html 位於listFrame中, 放有按分類排序的作曲家列表
titles.html 位於contentFrame中, 放有按字母序列裡各作曲家姓名及該作曲家的作品標題.
navigate.html 位於navigateFrame中, 放有超文本鏈, 使使用者選擇怎樣在listFrame中顯示作曲家:以字母序或分類序.這個檔案還定義了一個超文本鏈, 使使用者可以顯示每個作曲家的簡介.
附加檔案alphabet.html 放有按字母排序的作曲家,當使用者想顯示字母序列表時,按動此鏈,這個檔案中就顯示在listFrame中.
檔案category.html (按分類排序)包含的代碼類似於下述:

<B>Music Club Artists</B>
<P><B>Jazz</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0006 TARGET="contentFrame">Jon Coltrane</A>
<LI><A HREF=titles.html#0007 TARGET="contentFrame">Miles Davis</A>
<LI><A HREF=titles.html#0010 TARGET="contentFrame">Dexter Gordon</A>

<P><B>Soul</B>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Cater</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
...

檔案 alphabet.html (按字母排序) 包含的代碼類似於下述:

<B>Music Club Artists</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0002 TARGET="contentFrame">The Beatles</A>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Carter</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
......

檔案 navigate.html(在螢幕底部的導航鏈)包含的代碼類似下面. 注意: artists.html的目標是"_parent". 當使用者按動此鏈時,整個視窗被重寫,因為最上層視窗是navigateFrame的父輩.

<A HREF=alphabet.html TARGET="listFrame"><B>Alphabetical</B></A>
&nbsp&nbsp&nbsp
<A HREF=category.html TARGET="listFrame"><B>By category</B></A>
&nbsp&nbsp&nbsp
<A HREF=artists.html TARGET="_parent">
<B>Musician Descriptopns</B></A>

檔案titles.html(主檔案,顯示在右邊的架構中)包括的代碼大致如下:

<!------------------------------------------------------------------>
<A NAME="0001"><H3>Toshiko Akiyoshi</H3></A>
<P>Interlude
<!------------------------------------------------------------------>
<A NAME="0002"><H3>The Beatles</H3></A>
<P>Please Please Me
<!------------------------------------------------------------------>
<A NAME="0003"><H3>Betty Carter</H3></A>
<P>Ray Charles and Betty Carter
...

有關建立frame文法細節參見frame對象.

--------------------------------------------------------------------------------

引用window和frame
用哪個名字來引用視窗取決於你是想引用視窗的屬性、方法和事件處理常式,還是想把window作為form提交或超文本鏈的對象.

因為window對象位於JavaScript客戶階層的最頂層. window是說明視窗內各對象間內含項目關聯性的基礎.

引用視窗的屬性、方法和事件處理常式
可以用如下辦法之一來引用當前視窗或其它視窗的屬性、方法及事件處理常式:

self或window: self和window含義相同, 都是指當前視窗, 可以任選其一來引用當前視窗.如,調用window.close()或self.close()來關閉當前視窗
top或parent: top和parent均用來替代視窗的名稱. top是指最上層的Navigator視窗, parent則是指包含frameset的視窗.例如,語句parent.frame2.document.bgColor="teal"把名為frame2的frame的背景顏色置成teal. frame2是當前frameset的一個frame.
視窗變數的名字: 視窗變數名為開啟視窗時指定的變數.如,msgWindow.close關閉名為msgWindow的視窗. 但是若想在事件處理常式中開啟或關閉一個視窗,必須用window.open()或window.close(),而不能用open()和close().由於JavaScript中的靜態對象的範圍問題, 調用close而不指定對象名等價於document.close().
省略視窗名. 因為總是假定了當前視窗,調用視窗的方法和使用其屬性時,可以省略視窗名. 如close()關閉了當前視窗.
有關視窗方法的資訊參見window對象

例1 引用當前視窗. 下面這個語句引用了當前視窗內的名為musicform的form.如果核對框被核對,則該語句顯示一個警示.

if (self.document.musicForm.checkbox1.checked)
　　alert('The checkbox on the misicForm is checked')

例2 引用其它視窗.下面的語句引用了位於視窗checkboxWin的名為musicform的form.這些語句實現判斷是否核對框被核對,執行核對該核對框,判斷是否select對象的一個選項被選中,選擇SELECT 對象的一個選項

//判斷是否核對框被核對
if (checkboxWin.document.musicForm.checkbox2.checked) {
　　alert('The checkbox on the misicForm in checkboxWin is checked')}

//執行核對該核對框
checkboxWin.document.musicForm.checkbox2.checked=true

//判斷是否select對象的一個選項被選中
if (checkboxWin.document.musicForm.musicTypes.options[1].selected)
alert('Option 1 is selected!')

//選擇SELECT 對象的一個選項
checkboxWin.document.musicForm.musicTypes.selectedIndex=1

例3 引用另一個視窗中的frame. 下述語句引用了視窗window2中的名為frame2的frame.這條語句把frame2的背景顏色改為紫色,名字frame2必須是在<FRAMESET>標記中指明. <FRAMESET>能產生frameset.

window2.frame2.document.bgColor="violet"

在form提交或超文本鏈中引用一個視窗
當把一個視窗用作form提交或超文本鏈的對象時(作為<FORM>或<A>標記的TARGET屬性), 要使用視窗名,而不能用視窗變數. 這個視窗將是鏈被裝載進的視窗,或者對於form來說,是顯示伺服器響應的視窗.

例1 第二視窗. 下面的例子給第二視窗建立了一個超文本鏈.這個例子中,有:一個按鈕,此按鈕視窗能開啟名為window2的視窗;一個連結,把檔案doc2.html裝入最新開啟的視窗;另一個按鈕,此按鈕關閉視窗.

<P>
<INPUT TYPE="button" VALUE="Open window2"
onClick="msgWindow=window.open('','resizable=no,width=200,height=200')"
<P>
<INPUT TYPE ="button" VALUE="Close window2"
onClick="msgWindow.close()">

例2 第二視窗的anchor.在第二視窗內給anchor建立一個超文本鏈,這個連結在視窗window2中顯示檔案doc2.html的名為number的anchor .

<A HREF=doc2.html#numbers TARGET="window2">Numbers</A>

例3 frame的名稱. 下例為frame內的anchor建立了一個超文本鏈.這個鏈在名為contFrame中顯示檔案sesame.html中名為abs_method.這個frame必須放在當前frameset中,且frame的名字要用<FRAMESET>標記的NAME屬性定義.

<A HREF=sesame.html#abs_method TARGET="contentFrame">abs</A>

例4 常frame的名稱. 下例為檔案建立了一個超文本鏈.這個鏈把檔案artists.html的內容顯示在當前frameset的父視窗內,這個鏈對象(link object)出現在frameset的某個frame中,當使用者按動此鏈時, frameset中的所有frame都消失,artists.ftml的內容被裝入到父視窗內.

<A HREF="artists.html" TARGET="_parent">
<B>Musician Descriptions</B></A>

--------------------------------------------------------------------------------

在視窗之間瀏覽(Navigating among windows)
可以同時開啟很多Navigator視窗. 使用者可以按動視窗,給此視窗focus,實現在這些視窗之間瀏覽. 你可以用編程式的辦法把focus給一個視窗內的對象,或者通過指定此視窗作為超級文本鏈目標的辦法.儘管你能改變第二視窗內對象的值,但並不能啟用第二視窗,當前視窗總是活動的.

使用中視窗是擁有focus的視窗,一旦視窗擁有了focus,此視窗被放在最前面,能夠可見地被改變. 例如,此視窗的標題列可以改變顏色. 視覺效果隨你所用的平台而有所變化.

例1 把focus賦給另一個視窗的對象.下述語句可以把focus賦給視窗checkboxWin內的文字物件city, 因為city獲得了focus, checkboxWin也就得到了focus而成了使用中視窗.這個例子還包括了建立checkboxWin的語句.

checkboxWin=window.open("doc2.html")
...
checkboxWin.document.musicForm.city.focus()

例2 利用超文本鏈把focus賦給另一個視窗. 下面的句子指定window2作為超文本鏈的目標,當使用者按動此鏈時,focus轉換到window2, 若window2不存在,則被建立.

<A HREF="doc2.html" TARGET="window2"> Load a file into window2</A>