快速精通FRAME（下）

2024-04-27 13:52:52

字體：大中小

來源：轉載

供稿：網友

　　何時使用FRAME

　　我們知道，FRAMESET的基本用途就是分割瀏覽器窗口，使得窗口的一部分內容改變，而其他部分保持不變。利用這個特性，就可以實現工具欄導航功能，一個FRAME內放置靜態菜單頁面，用戶點擊其中的項目后，在另外的FRAME內顯示相關的內容。這樣就可以從整體上減少文件大小，因為不必在每個內容頁面中再包含菜單項目。

　　FRAME有2個明顯的不足：

FRAME從另外的級別上增加了站點的管理，原因在于超級鏈接不僅僅要指向適當的頁面，而且也會裝載到相關的FRAME內。
另外，大多數瀏覽器在執行“添加書簽”的操作時，只能記錄下FRAMESET的初始位置。不管添加書簽時是位于多么深的FRAMESET中，當再次選擇這個書簽時，就會返回到FRAMESET的初始頁面。這就加大了訪問者瀏覽指定內容的難度。

　　但是，如果好好地組織站點信息，使導航操作只有不深的幾層，那么，使用FRAME就能很好地為訪問者服務。記住：訪問者都希望簡潔的導航信息。

　　當然，導航并非是使用FRAME的唯一原因，也可以使用FRAME創建交換工具和交換頁面。而且，FRAME的多文檔框架結構非常適于被javascript應用程序所操作。

　　用FRAME設計站點

　　最常用的FRAME結構就是“菜單－內容”FRAMESET。一個FRAME內放置導航菜單，另一個FRAME內轉載子菜單，每個子菜單的鏈接就指向本身。唯一的有target的鏈接都在菜單FRAME內。請看下面的例程代碼：

＜HTML＞＜HEAD＞
＜TITLE＞Welcome to my site!＜/TITLE＞
＜/HEAD＞
＜FRAMESET cols="150,*"＞
＜FRAME name="menu" src="menu.htm"＞
＜FRAME name="content" src="intro.htm"＞
＜/FRAMESET＞
＜BODY＞
＜!--如果是支持FRAME的瀏覽器，則不會顯示下面的內容；否則，也顯示出簡單菜單頁面--＞
Welcome to my site.＜P＞
＜A href="intro.htm"＞Introduction＜/A＞
＜A href="products.htm"＞Products＜/A＞
＜A href="reviews.htm"＞Reviews＜/A＞
＜/BODY＞＜/HTML＞

>　　用腳本控制導航FRAME

　　上面介紹了FRAME的HTML代碼結構，現在開始走向更深一步：使用腳本程序控制FRAME。

　　每個Window對象有一個FRAMEs數組。對于普通的Web頁面，這個數組是空的，其屬性length為0。帶有FRAMESET的頁面，按照其上＜FRAME＞標記的前后順序，生成一個FRAME數組。由于FRAMESET所在頁面是每個FRAME的parent窗口，數組索引從0開始，所以從FRAMESET中引用第3個FRAME時就使用self.FRAMEs[2]，從其他FRAME文檔中引用第3個FRAME時就使用parent.FRAMEs[2]。

　　FRAME數組中的每一個成員都是一個窗口，它們具有普通窗口的一切方法、事件以及屬性，并且包括它自己的FRAME數組（當它包含另外一個FRAMESET時）。因此，用腳本去修改一個FRAME的內容就象修改它的location.href一樣簡單。

　　下面舉例說明，假設一個FRAMESET包含3個同樣的FRAME，都位于窗口下部：

＜FRAMESET rows="60%,40%"＞
＜FRAME name="link" src="link.htm"＞
＜FRAMESET cols="*,*,*"＞
  ＜FRAME name="blank1" src="blank.htm"＞
  ＜FRAME name="blank2" src="blank.htm"＞
  ＜FRAME name="blank3" src="blank.htm"＞
＜/FRAMESET＞
＜/FRAMESET＞

　　第一個FRAME中的文檔叫做link.htm，使用點擊其中的單一鏈接就可以修改其他三個FRAME中的內容。實現代碼如下:

＜a href="javascript:navAll()"＞修改下面3個FRAME的內容＜/a＞
＜SCRIPT language="javascript"＞＜!--
function navAll() {
parent.FRAMEs[1].location.href="red.htm";
parent.FRAMEs[2].location.href="blue.htm";
parent.FRAMEs[3].location.href="white.htm"; }
// --＞＜/SCRIPT＞

　　用腳本控制動態FRAME

　　如果FRAME中變化的內容不多，就可以考慮使用腳本程序動態生成其內容。這樣就不用再創建單獨的小HTML頁面，無需從服務器上下載。創建內容的方法與在任何窗口中書寫內容一樣，都是通過document對象。

　　舉個例子說明一下。假設要在一個FRAME內顯示小組成員的相片，并在其下的一個小FRAME內顯示該成員的名字等信息。首先建立信息數組：

empID = new Array();
empID[0] = 'Dana Corolla, CEO';
empID[1] = 'Arturo Montero, senior editor';
empID[2] = 'Percy Tercel, head designer';
empID[3] = 'Angus Coupedeville, astrologer';

　　然后，建立小組成員照片的圖形地圖，將每個＜AREA＞鏈接到函數showMe(n)，由它負責根據索引數據創建信息：

part1 = '＜HTML＞＜HEAD＞＜/HEAD＞';
part1+= '＜BODY bgcolor=#ffffff＞＜DIV align=center＞';
part2 = '＜/DIV＞＜/BODY＞＜/HTML＞';

function showMe(n) {
parent.FRAMEs[1].document.open();
parent.FRAMEs[1].document.write(part1);
parent.FRAMEs[1].document.write(empID[n]);
parent.FRAMEs[1].document.writeln(part2);
parent.FRAMEs[1].close();
}

　　FRAME間的腳本控制

　　使用javascript，我們既可以從創建窗口的頁面訪問那個窗口，也可以從這個窗口創建的窗口訪問它。另一方面，FRAMESET中的文檔（包括FRAMESET本身）總是可以訪問和操縱其中每個的javascript函數和變量。比如說，第三個FRAME中有函數sayGobble(vol)，那么在其他FRAME中就可以使用parent.FRAMEs[2].sayGobble(vol)來引用它。同樣，FRAMESET頁面中的變量myName可以被任何FRAME以parent.myName="Imelda"的命令進行設置。

　　不管在其他FRAME中的內容如何，在靜態FRAME或者FRAMESET中的函數和變量始終保持可用。這個特征非常有價值，不僅可以將通用函數保存在其中從而壓縮代碼，而且，還可以實現頁面間轉換時的狀態保持。

　　下面的FRAMESET頁面只有一個FRAME叫做query.htm，并且定義了一個javascript變量myWord：

＜HTML＞＜HEAD＞
＜TITLE＞Passing data＜/TITLE＞
＜SCRIPT LANGUAGE="javascript"＞＜!--
myWord="";
//--＞＜/SCRIPT＞
＜/HEAD＞
＜FRAMESET rows="*,1" FRAMEBORDER=no＞
＜FRAME name="active" src="query.htm"＞
＜FRAME name="dummy"＞
＜/FRAMESET＞
＜/HTML＞

　　頁面query.htm有一個文本輸入框以及一個到result.htm的鏈接，鏈接的onClick事件將設置FRAMESET頁面的myWord變量為文本輸入框的內容。代碼如下：

＜HTML＞＜HEAD＞＜/HEAD＞
＜BODY＞
＜FORM name="myForm"＞
＜INPUT type=text size=12 name="myText"＞
＜P＞
＜A onClick="parent.myWord=myText.value"
href="result.htm"＞See it in yellow on blue!＜/A＞
＜/FORM＞
＜/BODY＞＜/HTML＞

　　頁面result.htm取回并打印出myWord的數值，代碼是：

＜HTML＞
＜HEAD＞＜/HEAD＞
＜BODY bgcolor=#0000cc vlink=#99ffff＞
＜FONT size=+3 color=#ffff00＞
＜SCRIPT language="javascript"＞＜!--
document.write(parent.myWord);
//--＞＜/SCRIPT＞
＜/FONT＞＜P＞
＜A href="query.htm"＞Do it again＜/a＞
＜/BODY＞＜/HTML＞

　　這個例子很有實用價值。比如說，你可以設定訪問者按一定的次序打開頁面，收集用戶信息，最后定制出用戶特制的顯示內容。

　　談到狀態維護功能，這個方法不會比使用cookie或CGI更好，因為當FRAMESET重載或者退出時，變量值就丟失了。但是，它不要求服務器端響應，也不存在安全問題，因此還是可以小試一把的。

　　用腳本控制浮動FRAME

　　用腳本控制普通FRAME與浮動FRAME的方法基本相同，唯一的差別是浮動FRAME按＜IFRAME＞出現的順序定義索引位置。如果FRAMEs.length不為0，就表示可以安全地處理浮動FRAME。比如說，在下面的代碼中，如果存在叫做floater的浮動FRAME，鏈接就指向它；否則就指向"_top"：

＜IFRAME name="floater" src="trog.htm" width=200 height=200＞＜/IFRAME＞

＜A href="grot.html" target="floater" onClick="if (!self.FRAMEs.length)
this.target='_top'"＞See grot.htm＜/A＞

　　帶有浮動FRAME的Web頁面是FRAME文檔的parent窗口，因此，多個浮動FRAME仍然可以通過parent.FRAME數組去訪問每一個FRAME。

　　預防腳本編程錯誤

　　盡管FRAME是HTML的一個穩定規范說明，但DOM模型只把它們當做HTML元素而不是窗口，因此圍繞FRAME的腳本編程并不是能很周全地定義。這個不足導致了當裝載FRAME時會發生一些腳本執行方面的沖突。

　　立即修改FRAME內容的腳本經常會產生錯誤。原因在于：瀏覽器通常是先執行腳本命令，然后在按照src所示裝入頁面內容。

　　解決方法很直接，就是判斷FRAME內容是否裝載完畢。有一個好的處理技巧是以HTML頁面開始所有的FRAME，由它象主FRAMESET報告裝載請看。比如說，有一個FRAMESET頁面，要等裝載完所有的FRAME后才能執行函數goToIt()，那么就將下面的javascript程序段放進FRAMESET文檔中：

countDown=FRAMEs.length;
function soundOff() {
countDown--;
if (countDown==0) {
goToIt();
}
}

　　然后，在每個FRAME頁面的＜BODY＞標記中設置上onLoad="parent.soundOff()"。當FRAME頁面裝載并執行soundOFF()后，等到countDown 為0時，就表示FRAME完全裝載完畢。

　　總結

　　FRAME是雙刃劍，使用不好會造成混亂的站點結構和外觀，使用得當將大大方便用戶的操作方式以及形成清晰的頁面風格。相信你看完本文后，會對FRAME有了更親切的認識。

上一篇：快速精通FRAME（上）

下一篇：“畫中畫”效果――談IFRAME標簽的使用