快捷導(dǎo)航

javascript學(xué)習(xí)隨筆(使用window和frame)的技巧

更新時(shí)間：2007年03月08日 00:00:00 作者：

JavaScript允許創(chuàng)建和打開代表HTML文本, form對象和frame的窗口. window對象是JavaScript客戶層次結(jié)構(gòu)的最頂層對象, form元素和全部JavaScript代碼都是存在于文檔中,而文檔被裝載進(jìn)窗口. 為了理解窗口怎樣工作,你可以控制操作這些窗口.

打開和關(guān)閉窗口
當(dāng)用戶啟動(dòng)(launch)Navigator時(shí),將自動(dòng)創(chuàng)建一個(gè)窗口.用戶還可以使用Navigator的File菜單上的New Web Browser打開一個(gè)窗口, 可以用Navigator的File菜單的Close或Exit關(guān)閉一個(gè)窗口.也可以用程序的辦法來打開或關(guān)閉一個(gè)窗口.

打開窗口
用方法open創(chuàng)建一個(gè)窗口.下面語句創(chuàng)建了一個(gè)名為msgWindow的窗口,并在該窗口內(nèi)顯示文件sesame.html的內(nèi)容.

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

下面的這個(gè)語句能夠創(chuàng)建一個(gè)名為homeWindow的窗口,用于顯示Netscape的home page.

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

窗口可以有兩個(gè)名字.下述語句創(chuàng)建了一個(gè)有兩個(gè)名字的窗口,第一個(gè)名字為msgWindow用于引用窗口的屬性,方法和包含關(guān)系, 第二個(gè)名字displayWindow用于把窗口作為form提交或超文本鏈的對象來引用時(shí).

創(chuàng)建窗口時(shí),并不要求一定給出窗口名.但是你若打算從另一個(gè)窗口中引用此窗口,則此窗口必須有一個(gè)名字.有關(guān)使用窗口名字的信息參見windows and frames有關(guān)資料.

打開窗口時(shí),可以指定窗口屬性,如窗口的高度,寬度,是否包含工具條,location域或滾動(dòng)條等等.下述語句創(chuàng)建了一個(gè)沒有工具條但帶有滾動(dòng)條的窗口.

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

有關(guān)窗口的屬性的細(xì)節(jié)請參見OPEN 方法.

關(guān)閉窗口
可以在程序中使用方法close來關(guān)閉一個(gè)窗口.不允許只關(guān)閉一個(gè)frame, 而不關(guān)掉整個(gè)父窗口.

下述語句均可關(guān)閉當(dāng)前窗口:

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

下述語句關(guān)閉了一個(gè)名為msgWindow的窗口:

msgWindow.close()

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

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

下圖是一個(gè)含有三個(gè)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
創(chuàng)建一個(gè)frame
在HTML文檔中使用<frameSET>標(biāo)記就可以創(chuàng)建一個(gè)frame. <frameSET>標(biāo)記在HTML文檔中的唯一作用就是定義組成頁的各個(gè)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的層次結(jié)構(gòu),雖然有兩個(gè)frame是在另一個(gè)frameset中定義的,但這三個(gè)frame有同一個(gè)父親, 這是因?yàn)閒rame的父親是它的父窗口,而窗口是由frame而不是frameset確定的.

top

+--listFrame (category.html)

+--contentFrame(titles.html)

+--navigateFrame(navigate.html)
你也可以數(shù)組frames引用上述的frame(有關(guān)數(shù)組frames的信息參見frame對象):
listframe 用 top.frame[0]表示
contentframe 用 top.frame[1]表示
navigateframe 用 top.frame[2]表示
例2 可以用另一個(gè)辦法創(chuàng)建上述窗口: 最前面的兩個(gè)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>

下圖說明了這幾個(gè)frame的層次關(guān)系upperFrame和navigateFrame共享一個(gè)父輩:最頂?shù)膚indow. 而listFrame和contentFrame共享一個(gè)父輩:upperFrame.

top

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

+--navigateFrame
(navigate.html)
可以用下面的辦法引用這些frame(關(guān)于frame數(shù)組的信息參見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層次結(jié)構(gòu),你可以用location屬性來設(shè)置URL, 以更新frame的內(nèi)容.

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

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

當(dāng)用戶按動(dòng)此按鈕時(shí),文件artist.html被加載到名為upperFrame的frame中,而listFrame和contentFrame被關(guān)閉,且不再存在.

引用frame和在frame之間瀏覽(navigate)
因?yàn)閒rame是一種窗口,所以你可以與使用窗口類似的辦法引用frame和在frame 之間瀏覽.

frame的例子
在上一節(jié)中, 若frameset被設(shè)計(jì)為一個(gè)音樂俱樂部的可用的標(biāo)題,則這些frame及其HTML文件包括下述的內(nèi)容:

category.html 位于listFrame中, 放有按分類排序的作曲家列表
titles.html 位于contentFrame中, 放有按字母序列里各作曲家姓名及該作曲家的作品標(biāo)題.
navigate.html 位于navigateFrame中, 放有超文本鏈, 使用戶選擇怎樣在listFrame中顯示作曲家:以字母序或分類序.這個(gè)文件還定義了一個(gè)超文本鏈, 使用戶可以顯示每個(gè)作曲家的簡介.
附加文件alphabet.html 放有按字母排序的作曲家,當(dāng)用戶想顯示字母序列表時(shí),按動(dòng)此鏈,這個(gè)文件中就顯示在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(在屏幕底部的導(dǎo)航鏈)包含的代碼類似下面. 注意: artists.html的目標(biāo)是"_parent". 當(dāng)用戶按動(dòng)此鏈時(shí),整個(gè)窗口被重寫,因?yàn)樽钌蠈哟翱谑莕avigateFrame的父輩.

<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
...

有關(guān)創(chuàng)建frame語法細(xì)節(jié)參見frame對象.

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

引用window和frame
用哪個(gè)名字來引用窗口取決于你是想引用窗口的屬性、方法和事件處理程序,還是想把window作為form提交或超文本鏈的對象.

因?yàn)閣indow對象位于JavaScript客戶層次結(jié)構(gòu)的最頂層. window是說明窗口內(nèi)各對象間包含關(guān)系的基礎(chǔ).

引用窗口的屬性、方法和事件處理程序
可以用如下辦法之一來引用當(dāng)前窗口或其它窗口的屬性、方法及事件處理程序:

self或window: self和window含義相同, 都是指當(dāng)前窗口, 可以任選其一來引用當(dāng)前窗口.如,調(diào)用window.close()或self.close()來關(guān)閉當(dāng)前窗口
top或parent: top和parent均用來替代窗口的名稱. top是指最上層的Navigator窗口, parent則是指包含frameset的窗口.例如,語句parent.frame2.document.bgColor="teal"把名為frame2的frame的背景顏色置成teal. frame2是當(dāng)前frameset的一個(gè)frame.
窗口變量的名字: 窗口變量名為打開窗口時(shí)指定的變量.如,msgWindow.close關(guān)閉名為msgWindow的窗口. 但是若想在事件處理程序中打開或關(guān)閉一個(gè)窗口,必須用window.open()或window.close(),而不能用open()和close().由于JavaScript中的靜態(tài)對象的作用域問題, 調(diào)用close而不指定對象名等價(jià)于document.close().
省略窗口名. 因?yàn)榭偸羌俣水?dāng)前窗口,調(diào)用窗口的方法和使用其屬性時(shí),可以省略窗口名. 如close()關(guān)閉了當(dāng)前窗口.
有關(guān)窗口方法的信息參見window對象

例1 引用當(dāng)前窗口. 下面這個(gè)語句引用了當(dāng)前窗口內(nèi)的名為musicform的form.如果核對框被核對,則該語句顯示一個(gè)警示.

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

例2 引用其它窗口.下面的語句引用了位于窗口checkboxWin的名為musicform的form.這些語句實(shí)現(xiàn)判斷是否核對框被核對,執(zhí)行核對該核對框,判斷是否select對象的一個(gè)選項(xiàng)被選中,選擇SELECT 對象的一個(gè)選項(xiàng)

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

//執(zhí)行核對該核對框
checkboxWin.document.musicForm.checkbox2.checked=true

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

//選擇SELECT 對象的一個(gè)選項(xiàng)
checkboxWin.document.musicForm.musicTypes.selectedIndex=1

例3 引用另一個(gè)窗口中的frame. 下述語句引用了窗口window2中的名為frame2的frame.這條語句把frame2的背景顏色改為紫色,名字frame2必須是在<FRAMESET>標(biāo)記中指明. <FRAMESET>能產(chǎn)生frameset.

window2.frame2.document.bgColor="violet"

在form提交或超文本鏈中引用一個(gè)窗口
當(dāng)把一個(gè)窗口用作form提交或超文本鏈的對象時(shí)(作為<FORM>或<A>標(biāo)記的TARGET屬性), 要使用窗口名,而不能用窗口變量. 這個(gè)窗口將是鏈被裝載進(jìn)的窗口,或者對于form來說,是顯示服務(wù)器響應(yīng)的窗口.

例1 第二窗口. 下面的例子給第二窗口創(chuàng)建了一個(gè)超文本鏈.這個(gè)例子中,有:一個(gè)按鈕,此按鈕窗口能打開名為window2的窗口;一個(gè)鏈接,把文件doc2.html裝入最新打開的窗口;另一個(gè)按鈕,此按鈕關(guān)閉窗口.

<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.在第二窗口內(nèi)給anchor創(chuàng)建一個(gè)超文本鏈,這個(gè)鏈接在窗口window2中顯示文件doc2.html的名為number的anchor .

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

例3 frame的名稱. 下例為frame內(nèi)的anchor創(chuàng)建了一個(gè)超文本鏈.這個(gè)鏈在名為contFrame中顯示文件sesame.html中名為abs_method.這個(gè)frame必須放在當(dāng)前frameset中,且frame的名字要用<FRAMESET>標(biāo)記的NAME屬性定義.

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

例4 常frame的名稱. 下例為文件創(chuàng)建了一個(gè)超文本鏈.這個(gè)鏈把文件artists.html的內(nèi)容顯示在當(dāng)前frameset的父窗口內(nèi),這個(gè)鏈對象(link object)出現(xiàn)在frameset的某個(gè)frame中,當(dāng)用戶按動(dòng)此鏈時(shí), frameset中的所有frame都消失,artists.ftml的內(nèi)容被裝入到父窗口內(nèi).

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

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

在窗口之間瀏覽(Navigating among windows)
可以同時(shí)打開很多Navigator窗口. 用戶可以按動(dòng)窗口,給此窗口focus,實(shí)現(xiàn)在這些窗口之間瀏覽. 你可以用編程序的辦法把focus給一個(gè)窗口內(nèi)的對象,或者通過指定此窗口作為超級文本鏈目標(biāo)的辦法.盡管你能改變第二窗口內(nèi)對象的值,但并不能激活第二窗口,當(dāng)前窗口總是活動(dòng)的.

活動(dòng)窗口是擁有focus的窗口,一旦窗口擁有了focus,此窗口被放在最前面,能夠可見地被改變. 例如,此窗口的標(biāo)題欄可以改變顏色. 視覺效果隨你所用的平臺而有所變化.

例1 把focus賦給另一個(gè)窗口的對象.下述語句可以把focus賦給窗口checkboxWin內(nèi)的文本對象city, 因?yàn)閏ity獲得了focus, checkboxWin也就得到了focus而成了活動(dòng)窗口.這個(gè)例子還包括了創(chuàng)建checkboxWin的語句.

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

例2 利用超文本鏈把focus賦給另一個(gè)窗口. 下面的句子指定window2作為超文本鏈的目標(biāo),當(dāng)用戶按動(dòng)此鏈時(shí),focus轉(zhuǎn)換到window2, 若window2不存在,則被創(chuàng)建.

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

您可能感興趣的文章: