JavaScript 框架

　

第 16 章　Frame

　作者: 伍新華 Email: [e-mail]

1.　 窗格內的屬性設定

2.　 窗格間的屬性設定

1.　 使用 location=" " 的方法

2.　 使用連結的方法

　

　

---

　

　

　　窗格 (frame) 是在視窗內分拆出來的小窗框, 有自己的框線及捲軸, 但沒有工具列、狀態列等元件。窗格一般的用途是在視窗一邊顯示目錄, 另一邊顯示內容。在遊戲程式, 我們常用一個小窗格來顯示遊戲的成績及結果, 在第 18章 的遊戲有多個這方面的例子。

　

　窗格的劃分

　　以下是一個常見的視窗劃分方式:

圖 16-1　一個視窗內的多個窗格

　

　　top (或 parent) 是指最頂層的窗格, 各窗格在 top 內分割, 也變成附屬 top 的物件, 所以有以下物件的個別名稱:

top.listFrame
top.contentFrame
top.navigateFrame

　　要將視窗如 圖16-1 般劃分, 要在 top 的檔案中設定, 這要使用 這標籤, 習慣是放在 中, 例如:

90%,10%>
　　　25%,75%>
　　　　　　demo1.htm name=listFrame>
　　　　　　demo2.htm name=contentFrame>
　　　
　　　demo3.htm name=navigateFrame>

　　請留意以下事項:

1.　 習慣是放在 及 標籤之間。

2.　分割出來的視窗排序, rows (列) 是順序由上而下, cols (column/欄) 是順序由左而右。

3.　90%,10%> 是將視窗作 9:1 順序上下分割, 如下圖之左, 若是 20%,80%> 就是作左右分割, 如下圖之右。若你不想計算第二個數字, 可用 * 來代表, 例如 16%,* > 。

　

4.　在一個 之下若再有 就是將有關的窗格再劃分, 例如以下網頁:

15%,85%>
　　demo1.htm name=listFrame>
　　20%,80%>
　　　     demo2.htm name=bannerFrame>
　　　     demo3.htm name=contentFrame>
　　

　　開啟這網頁時, 就會載入以下檔案:

　

5.　在一個窗格載入檔案是用以下標籤:

　　src= (src 代表 source) 是指定載入的網頁, name= 是設定窗格的名稱, 在窗格的操作上, 我們使用的是這名稱, 上述例子是 listFrame、contentFrame 等等 (這些都是自訂名稱)。

6.　以下例子是不要 navigateFrame:

25%,75%>
　　demo1.htm name=listFrame>
　　demo2.htm name=contentFrame>

7.　以下例子是將 navigateFrame 放在上方:

10%,90%>
　　demo1.htm name=navigateFrame>
　　
　　　　demo2.htm name=listFrame>
　　　　demo3.htm name=contentFrame>
　　

　　請你自己練習上述窗格的劃分, 暫時你可使用 src=" " , 這是不在窗格放進檔案, 又或使用以下的虛擬檔案:

　

　

　

---

　窗格的屬性設定

　

1.　窗格內的屬性設定

　　在一個窗格內, 我們可以設定以下屬性:

　

練習-123　設定窗格內的屬性

　　在這例子, 你看到設定窗格內的屬性後, 對窗格的外觀有什麼影響。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

dirFrame marginheight=50
　　marginwidth=50 scrolling=yes>

contentFrame
　　marginheight=0 marginwidth=0 scrolling=no noresize>

2.　這網頁左右窗格大小一樣, 載入的網頁也是一樣, 但邊界設定不同, 請你看看左右窗格有什麼分別。

　

　　這些屬性設定是放在 這標籤內, 這例子的左右窗格都是載入 demo1.htm 這檔案, 但左窗格加了上邊界 (marginheight) 及左右邊界 (marginwidth), 使用 scrolling=yes/no 可選擇是否要捲軸列, 在任何一個窗格設定 noresize 是使到兩個窗格不可讓觀看者調整大小。

　

　

2.　窗格間的屬性設定

　　在窗格之間, 你可設定 frameborder 及 framespacing 兩個屬性, 例如:

0 framespacing=0>

　　frameborder=0 是取消窗格間的分隔線, 用一條空白欄替代, 若同時設定 framespacing=0, 兩個窗格就會緊貼, 在版位的編排上, 觀看者不會覺得有兩個窗格, 你可試試以下的網頁, 看有什麼效果。

　

練習-124　設定窗格間的屬性

　　在這例子, 你看到設定窗格間的屬性後, 對整個窗格的外觀有什麼影響。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

0 framespacing=0 >
　　dirFrame scrolling=no >
　　contentFrame>

2.　網頁開啟後, 請你看看兩個窗格的顯示。

3.　請你將這網頁複製去硬碟, 將 frameborder 及 framespacing 設為 =1 或 =2, 看有什麼分別。

　

　

　

---

　改變另一個窗格的 property

　　前面設定窗格的例子, 筆者都給予每個窗格一個名稱, 使用這些名稱, 我們可以在一個窗格控制另一個窗格的 property, 請看以下例子。

　

練習-125　窗格間的控制

　　在這例子, 你會看到以下的窗格及載入以下的檔案: 

　　在 lowerFrame 內有數個按鈕, 你可看到這些按鈕如何改變其他兩個窗格的 property。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

25%,75%>
　　left.htm name=leftFrame>
　　60%,40%>
　　　　upper.htm name=upperFrame>
　　　　lower.htm name=lowerFrame>
　　

2.　這網頁開啟後, 你會見到三個窗格及在窗格內的三個檔案, left.htm 沒有特別的內容, upper.htm 有以下的一個文字框:

fm>
tx value="Hello, everybody! ">

3.　lower.htm 有以下內容:

fm>
　　onClick="top.leftFrame.document.bgColor='yellow' " >

　　onClick="top.upperFrame.document.bgColor='lightcyan' " >

　　onClick="top.upperFrame.document.fm.tx.value=' ' " >

4.　下窗格有三個按鈕, 請你試第一及第二個按鈕, 看左窗格及上窗格的背景顏色轉變。請在上窗格的文字框輸入一些文字, 按第三個按鈕, 留意文字框的文字會消失。

　

1.　留意在 lower.htm 內以下一句:

onClick="top.leftFrame.document.bgColor='yellow' "

　　用 document.bgColor='顏色' 可改變視窗中網頁的背景顏色, 這處的操作也是一樣, 不同的是這處指定 top.leftFrame 的背景顏色。

2.　這處要留意窗格的名稱, 全部窗格都是屬於一個頂層窗格的, 這就是 top 或 parent, 所以這處上窗格的名稱是 top.upperFrame 或 parent.upperFrame, 使用這名稱, 就可控制這窗格的物件, 例如這窗格內的文字框有這名稱:

top.upperFrame.document.fm.tx

　　所以使用 top.upperFrame.document.fm.tx.value=' ' 就可清除這文字框內的文字。

　

　

　

---

　在某窗格載入指定的網頁

　

1.　使用 location=" " 的方法

　　在 2.12 的一節說過使用 window.location 就可在瀏覽器載入某一個網頁, 在窗格中的操作原理也是一樣, 我們只要指定某個窗格, 就可將網頁放進這窗格。

　

練習-126　在左窗格控制右窗格的網頁

　　在這例子, 你看到以下兩個窗格, 左窗格內有四個按鈕, 其中三個是轉換右窗格的網頁, 第四個是將右窗格的 part1.htm 載入 top (頂層窗格) 內, 你可看看有什麼效果。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

25%,75%>
　　control.htm name=leftFrame >
　　part1.htm name=rightFrame >

　

2.　網頁開啟後, 你會見到左窗格載入了 control.htm, 這檔案有以下內容:

control.htm

　　onClick="top.rightFrame.location='part2.htm' ">

 

　　onClick="top.rightFrame.location='part3.htm' ">

　　onClick="top.rightFrame.location='part1.htm' ">

　　onClick="top.location='part1.htm' ">

3.　請你試驗這四個按鈕的反應。

　

　　這處使用 top.frameName.location 來在某窗格載入指定的網頁, 無特別之處, 但請留意 top.location='part1.htm' 這一項, 這是將一個網頁載入頂層窗格, 即是取代 frame4.htm 這網頁, 所以窗格就不見了, 用這方式可取消已設定的窗格。

　

　

2.　使用連結的方法

　　在 HTML 的語法, 使用 就可在瀏覽器載入新的網頁, 若要指定在某個窗格載入新網頁, 可用 target=frameName 的方法, 留意 HTML 的語法與 JavaScript有少許不同。

　

練習-127　用左窗格的連結控制右窗格的網頁

　　這例子是使用上個例子的網頁, 不同處是左窗格用四個連結來代替四個按鈕, 其中三個連結是轉換右窗格的網頁, 第四個是將右窗格的 part1.htm 載入 top (頂層窗格) 內, 你可看看有什麼效果。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案與 frame4.htm 相同, 但左窗格載入的是 control2.htm。

2.　網頁開啟後, 你會見到左窗格的 control2.htm, 這檔案有以下內容:

control2.htm

part2.htm target=rightFrame> View part2

part3.htm target=rightFrame> View part3

part1.htm target=rightFrame> View part1

part1.htm target=_top> Remove frame

3.　網頁開啟後, 請你試試四個網頁的連結, 看有什麼反應。

　

1.　這處使用 target=rightFrame 來將網頁載入 rightFrame 這窗格, 假若全部連結都是載入這窗格, 可在 中使用 的指示, 例如 control2.htm 可有以下寫法:

rightFrame>

control2.htm

part2.htm> View part2

part3.htm> View part3

part1.htm> View part1

part1.htm target=_top> Remove frame

　　沒有指定 target 的都會以 rightFrame 為目標。

2.　留意 HTML 的語法與 JavaScript 有少許不同, 在 JavaScript 中, 我們要使用 top.rightFrame 來指定右窗格, 但 HTML 不用這方式, 例如以下寫法:

control2.htm

part2.htm target=top.rightFrame> View part2

part3.htm target=top.rightFrame> View part3

part1.htm target=top.rightFrame> View part1

part1.htm target=top> Remove frame

　　按某一個連結時, 會開啟一個新視窗來載入該網頁, 而不是載入右窗格。

　

　

　

---

　將資料寫進另一個窗格

　　在遊戲程式中, 我們常需要將遊戲成績一路記下來, 因為我們不能將新資料寫進操作中的網頁, 所以要開啟一個記錄窗格, 操作中的窗格可以不斷將新資料窗進記錄窗格。

　　在 2.3 的一節, 你看過如何將一個新網頁寫在一個子視窗內, 這處的原理也是一樣, 不同的是寫進的目標是一個窗格。

　

練習-128　將資料寫進記錄窗格

　　這例子的網頁有上下兩個窗格, 上窗格有一個程式利用 random( ) 開出 0 或 1 的隨機數, 若是 0 就當作 odd, 若是 1 就當作 even, 在下窗格一路記錄 odd 及 even 出現的次序。

1.　請用瀏覽器開啟示範磁碟中的 , 這檔案有以下內容:

75%,25%>
　　control3.htm name=upperFrame>
　　lowerFrame src="javascript:document.write
　　　　　(' ')" >

2.　網頁有上下窗格, 下窗格沒有載入檔案, 而是利用 src="javascript:document.write( ) 來寫進一個網頁的 HTML 格式。

　　這處的 src= 表示隨後的是網頁來源, javascript: 表示隨後是 JavaScript 的 method 或 function, 這處例子是 document.write( ), 這 method 將一個網頁的基本架構寫出來, 作為 src= 的來源。

3.　在上窗格載入的 control3.htm 有以下內容:

4.　請你按 [Give me a number] 的按鈕, 你會看到下窗格出現 odd/ 或 even/ 的字, 你一路按這按鈕, 新的記錄就會一路加上去。

　

　

　

---

　窗格的陣列排序

　　設定窗格時, 我們可以給予每個窗格個別物件名稱, 然後利用這名稱來控制這窗格, 這是前面例子使用的方法, 另一個方法是使用窗格的陣列排序來指定某個窗格。

　　在窗格的陣列上, 頂層的物件是 top (parent), 在 top 下的窗格陣列是 frames, 所以窗格的陣列是 top.frames[i], 例如以下兩個情況:

　　排序是從上方開始, 再由左至右。

　

　　以上例子的三個窗格都是屬於 top 下一層的 frames, 如下:

　

　　假若作這設定: top (parent)

　　這些窗格有以下排序名稱:

upperFrame=top.frames[0]
lowerFrame=top.frames[1]
listFrame=top.frames[0].frames[0]
contentFrame=top.frames[0].frames[1]

　

　　上述分割是先將 top 分為兩部份, 例如:

80%,20%>
　　demo1.htm name=upperFrame >
　　demo2.htm name=lowerFrame >

　　再在 demo1.htm 檔案中垂直分割為兩個窗格:

25%,75%>
　　demo3.htm name=listFrame>
　　demo4.htm name=contentFrame>

　

　

---

( 第 16 章完 )