JavaScript 框架
时间：2006-07-14 来源：pascal4123
第 16 章 Frame
德嘉書業 / 德嘉資訊科技 (www.takka.com.hk) 作者: 伍新華 Email: [email protected]16.1 窗格的劃分
16.2 窗格的屬性設定
1. 窗格內的屬性設定
2. 窗格間的屬性設定
16.3 改變另一個窗格的 property
16.4 在某窗格載入指定的網頁
1. 使用 location=" " 的方法
2. 使用連結的方法
16.5 將資料寫進另一個窗格
16.6 窗格的陣列排序
窗格 (frame) 是在視窗內分拆出來的小窗框, 有自己的框線及捲軸, 但沒有工具列、狀態列等元件。窗格一般的用途是在視窗一邊顯示目錄, 另一邊顯示內容。在遊戲程式, 我們常用一個小窗格來顯示遊戲的成績及結果, 在第 18章 的遊戲有多個這方面的例子。
16.1 窗格的劃分
以下是一個常見的視窗劃分方式:
圖 16-1 一個視窗內的多個窗格
top (或 parent) 是指最頂層的窗格, 各窗格在 top 內分割, 也變成附屬 top 的物件, 所以有以下物件的個別名稱:
top.listFrame
top.contentFrame
top.navigateFrame
要將視窗如 圖16-1 般劃分, 要在 top 的檔案中設定, 這要使用 <frameset> 這標籤, 習慣是放在 <head> 中, 例如:
<html>
<head>
<frameset rows=90%,10%>
<frameset cols=25%,75%>
<frame src=demo1.htm name=listFrame>
<frame src=demo2.htm name=contentFrame>
</frameset>
<frame src=demo3.htm name=navigateFrame>
</frameset>
</head>
<body> </body> </html>
請留意以下事項:
1. <frameset> 習慣是放在 <head> 及 </head> 標籤之間。
2. 分割出來的視窗排序, rows (列) 是順序由上而下, cols (column/欄) 是順序由左而右。
3. <frameset rows=90%,10%> 是將視窗作 9:1 順序上下分割, 如下圖之左, 若是 <frameset cols=20%,80%> 就是作左右分割, 如下圖之右。若你不想計算第二個數字, 可用 * 來代表, 例如 <frameset rows=16%,* > 。
4. 在一個 <frameset> 之下若再有 <frameset> 就是將有關的窗格再劃分, 例如以下網頁:
<html> <head>
<frameset cols=15%,85%>
<frame src=demo1.htm name=listFrame>
<frameset rows=20%,80%>
<frame src=demo2.htm name=bannerFrame>
<frame src=demo3.htm name=contentFrame>
</frameset>
</frameset>
</head> <body> </body> </html>
開啟這網頁時, 就會載入以下檔案:
5. 在一個窗格載入檔案是用以下標籤:
<frame src="檔案" name="frameName">
src= (src 代表 source) 是指定載入的網頁, name= 是設定窗格的名稱, 在窗格的操作上, 我們使用的是這名稱, 上述例子是 listFrame、contentFrame 等等 (這些都是自訂名稱)。
6. 以下例子是不要 navigateFrame:
<html> <head>
<frameset cols=25%,75%>
<frame src=demo1.htm name=listFrame>
<frame src=demo2.htm name=contentFrame>
</frameset>
</head>
<body> </body> </html>
7. 以下例子是將 navigateFrame 放在上方:
<html> <head>
<frameset rows=10%,90%>
<frame src=demo1.htm name=navigateFrame>
<frameset cols=25%,75%>
<frame src=demo2.htm name=listFrame>
<frame src=demo3.htm name=contentFrame>
</frameset>
</frameset>
</head> <body> </body> </html>
請你自己練習上述窗格的劃分, 暫時你可使用 src=" " , 這是不在窗格放進檔案, 又或使用以下的虛擬檔案:
<frame src="javascript:void(0)" name=" ">
16.2 窗格的屬性設定
1. 窗格內的屬性設定
在一個窗格內, 我們可以設定以下屬性:
練習-123 設定窗格內的屬性
在這例子, 你看到設定窗格內的屬性後, 對窗格的外觀有什麼影響。
1. 請用瀏覽器開啟示範磁碟中的 frame1.htm, 這檔案有以下內容:
<html> <head>
<frameset cols="50%,* " >
<frame src="demo1.htm" name=dirFrame marginheight=50
marginwidth=50 scrolling=yes>
<frame src="demo1.htm" name=contentFrame
marginheight=0 marginwidth=0 scrolling=no noresize>
</frameset>
</head> <body> </body> </html>
2. 這網頁左右窗格大小一樣, 載入的網頁也是一樣, 但邊界設定不同, 請你看看左右窗格有什麼分別。
這些屬性設定是放在 <frame> 這標籤內, 這例子的左右窗格都是載入 demo1.htm 這檔案, 但左窗格加了上邊界 (marginheight) 及左右邊界 (marginwidth), 使用 scrolling=yes/no 可選擇是否要捲軸列, 在任何一個窗格設定 noresize 是使到兩個窗格不可讓觀看者調整大小。
2. 窗格間的屬性設定
在窗格之間, 你可設定 frameborder 及 framespacing 兩個屬性, 例如:
<frameset cols="20%,80%" frameborder=0 framespacing=0>
frameborder=0 是取消窗格間的分隔線, 用一條空白欄替代, 若同時設定 framespacing=0, 兩個窗格就會緊貼, 在版位的編排上, 觀看者不會覺得有兩個窗格, 你可試試以下的網頁, 看有什麼效果。
練習-124 設定窗格間的屬性
在這例子, 你看到設定窗格間的屬性後, 對整個窗格的外觀有什麼影響。
1. 請用瀏覽器開啟示範磁碟中的 frame2.htm, 這檔案有以下內容:
<html> <head>
<frameset cols="20%,*" frameborder=0 framespacing=0 >
<frame src="demo1.htm" name=dirFrame scrolling=no >
<frame src="demo1.htm" name=contentFrame>
</frameset>
</head> <body> </body> </html>
2. 網頁開啟後, 請你看看兩個窗格的顯示。
3. 請你將這網頁複製去硬碟, 將 frameborder 及 framespacing 設為 =1 或 =2, 看有什麼分別。
16.3 改變另一個窗格的 property
前面設定窗格的例子, 筆者都給予每個窗格一個名稱, 使用這些名稱, 我們可以在一個窗格控制另一個窗格的 property, 請看以下例子。
練習-125 窗格間的控制
在這例子, 你會看到以下的窗格及載入以下的檔案:
在 lowerFrame 內有數個按鈕, 你可看到這些按鈕如何改變其他兩個窗格的 property。
1. 請用瀏覽器開啟示範磁碟中的 frame3.htm, 這檔案有以下內容:
<html> <head>
<frameset cols=25%,75%>
<frame src=left.htm name=leftFrame>
<frameset rows=60%,40%>
<frame src=upper.htm name=upperFrame>
<frame src=lower.htm name=lowerFrame>
</frameset>
</frameset>
</head> <body> </body> </html>
2. 這網頁開啟後, 你會見到三個窗格及在窗格內的三個檔案, left.htm 沒有特別的內容, upper.htm 有以下的一個文字框:
<html> <body bgcolor=beige text=blue>
<form name=fm>
<input type=text name=tx value="Hello, everybody! ">
</form>
</body> </html>
3. lower.htm 有以下內容:
<html> <body bgcolor=aliceblue>
<form name=fm>
<input type=button value="Change leftFrame to yellow"
onClick="top.leftFrame.document.bgColor='yellow' " > <br>
<input type=button value="Change upperFrame to lightcyan"
onClick="top.upperFrame.document.bgColor='lightcyan' " > <br>
<input type=button value="Clear the textbox in upperFrame"
onClick="top.upperFrame.document.fm.tx.value=' ' " >
</form>
</body> <html>
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=' ' 就可清除這文字框內的文字。
16.4 在某窗格載入指定的網頁
1. 使用 location=" " 的方法
在 2.12 的一節說過使用 window.location 就可在瀏覽器載入某一個網頁, 在窗格中的操作原理也是一樣, 我們只要指定某個窗格, 就可將網頁放進這窗格。
練習-126 在左窗格控制右窗格的網頁
在這例子, 你看到以下兩個窗格, 左窗格內有四個按鈕, 其中三個是轉換右窗格的網頁, 第四個是將右窗格的 part1.htm 載入 top (頂層窗格) 內, 你可看看有什麼效果。
1. 請用瀏覽器開啟示範磁碟中的 frame4.htm, 這檔案有以下內容:
<html> <head>
<frameset cols=25%,75%>
<frame src=control.htm name=leftFrame >
<frame src=part1.htm name=rightFrame >
</frameset>
</head> <body> </body> </html>
2. 網頁開啟後, 你會見到左窗格載入了 control.htm, 這檔案有以下內容:
<html> <body bgcolor=beige text=red> <p> <br>
<h2> control.htm </h2>
<form>
<input type=button value="View part2"
onClick="top.rightFrame.location='part2.htm' "> <p>
<input type=button value="View part3"
onClick="top.rightFrame.location='part3.htm' "> <p>
<input type=button value="Return to part1"
onClick="top.rightFrame.location='part1.htm' "> <p>
<input type=button value="Remove frame"
onClick="top.location='part1.htm' ">
</body> </html>
3. 請你試驗這四個按鈕的反應。
這處使用 top.frameName.location 來在某窗格載入指定的網頁, 無特別之處, 但請留意 top.location='part1.htm' 這一項, 這是將一個網頁載入頂層窗格, 即是取代 frame4.htm 這網頁, 所以窗格就不見了, 用這方式可取消已設定的窗格。
2. 使用連結的方法
在 HTML 的語法, 使用 <a href=" "> 就可在瀏覽器載入新的網頁, 若要指定在某個窗格載入新網頁, 可用 target=frameName 的方法, 留意 HTML 的語法與 JavaScript有少許不同。
練習-127 用左窗格的連結控制右窗格的網頁
這例子是使用上個例子的網頁, 不同處是左窗格用四個連結來代替四個按鈕, 其中三個連結是轉換右窗格的網頁, 第四個是將右窗格的 part1.htm 載入 top (頂層窗格) 內, 你可看看有什麼效果。
1. 請用瀏覽器開啟示範磁碟中的 frame5.htm, 這檔案與 frame4.htm 相同, 但左窗格載入的是 control2.htm。
2. 網頁開啟後, 你會見到左窗格的 control2.htm, 這檔案有以下內容:
<html> <body bgcolor=beige text=red> <p> <br>
<h2> control2.htm </h2>
<a href=part2.htm target=rightFrame> View part2 </a> <p>
<a href=part3.htm target=rightFrame> View part3 </a> <p>
<a href=part1.htm target=rightFrame> View part1 </a> <p>
<a href=part1.htm target=_top> Remove frame </a> <p>
</body> </html>
3. 網頁開啟後, 請你試試四個網頁的連結, 看有什麼反應。
1. 這處使用 target=rightFrame 來將網頁載入 rightFrame 這窗格, 假若全部連結都是載入這窗格, 可在 <head> 中使用 <base target= "frameName"> 的指示, 例如 control2.htm 可有以下寫法:
<html> <head> <base target=rightFrame> </head>
<body bgcolor=beige text=red><p> <br>
<h2> control2.htm </h2>
<a href=part2.htm> View part2 </a> <p>
<a href=part3.htm> View part3 </a> <p>
<a href=part1.htm> View part1 </a> <p>
<a href=part1.htm target=_top> Remove frame </a> <p>
</body> </html>
沒有指定 target 的都會以 rightFrame 為目標。
2. 留意 HTML 的語法與 JavaScript 有少許不同, 在 JavaScript 中, 我們要使用 top.rightFrame 來指定右窗格, 但 HTML 不用這方式, 例如以下寫法:
<html> <body bgcolor=beige text=red><p> <br>
<h1> control2.htm </h1>
<a href=part2.htm target=top.rightFrame> View part2 </a> <p>
<a href=part3.htm target=top.rightFrame> View part3 </a> <p>
<a href=part1.htm target=top.rightFrame> View part1 </a> <p>
<a href=part1.htm target=top> Remove frame </a> <p>
</body></html>
按某一個連結時, 會開啟一個新視窗來載入該網頁, 而不是載入右窗格。
16.5 將資料寫進另一個窗格
在遊戲程式中, 我們常需要將遊戲成績一路記下來, 因為我們不能將新資料寫進操作中的網頁, 所以要開啟一個記錄窗格, 操作中的窗格可以不斷將新資料窗進記錄窗格。
在 2.3 的一節, 你看過如何將一個新網頁寫在一個子視窗內, 這處的原理也是一樣, 不同的是寫進的目標是一個窗格。
練習-128 將資料寫進記錄窗格
這例子的網頁有上下兩個窗格, 上窗格有一個程式利用 random( ) 開出 0 或 1 的隨機數, 若是 0 就當作 odd, 若是 1 就當作 even, 在下窗格一路記錄 odd 及 even 出現的次序。
1. 請用瀏覽器開啟示範磁碟中的 frame6.htm, 這檔案有以下內容:
<html> <head>
<frameset rows=75%,25%>
<frame src=control3.htm name=upperFrame>
<frame name=lowerFrame src="javascript:document.write
('<html> <body bgcolor=bisque> </body></html>')" >
</frameset>
</head> <body> </body> </html>
2. 網頁有上下窗格, 下窗格沒有載入檔案, 而是利用 src="javascript:document.write( ) 來寫進一個網頁的 HTML 格式。
這處的 src= 表示隨後的是網頁來源, javascript: 表示隨後是 JavaScript 的 method 或 function, 這處例子是 document.write( ), 這 method 將一個網頁的基本架構寫出來, 作為 src= 的來源。
3. 在上窗格載入的 control3.htm 有以下內容:
<html> <head>
</head> <body>
<form>
<input type=button value="Give me a number" onClick="ranNum( )">
</form>
</body> </html>
4. 請你按 [Give me a number] 的按鈕, 你會看到下窗格出現 odd/ 或 even/ 的字, 你一路按這按鈕, 新的記錄就會一路加上去。
16.6 窗格的陣列排序
設定窗格時, 我們可以給予每個窗格個別物件名稱, 然後利用這名稱來控制這窗格, 這是前面例子使用的方法, 另一個方法是使用窗格的陣列排序來指定某個窗格。
在窗格的陣列上, 頂層的物件是 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 分為兩部份, 例如:
<frameset rows=80%,20%>
<frame src=demo1.htm name=upperFrame >
<frame src=demo2.htm name=lowerFrame >
</frameset>
再在 demo1.htm 檔案中垂直分割為兩個窗格:
<frameset cols=25%,75%>
<frame src=demo3.htm name=listFrame>
<frame src=demo4.htm name=contentFrame>
</frameset>
( 第 16 章完 )
相关阅读 更多 +
