FRAME（框架）是Web上經(jīng)常會看到的頁面結(jié)構(gòu)。使用可視Web開發(fā)工具（比如Dreamweaver或者Frontpage），雖然可以在WYSIWYG環(huán)境中通過簡單的鼠標(biāo)托拽完成FRAME的構(gòu)建，但是要實現(xiàn)真正細(xì)致甚至強大的功能，仔細(xì)理解FRAME的代碼結(jié)構(gòu)至關(guān)重要！你將發(fā)現(xiàn)，F(xiàn)RAME原來是這樣的親切易用。
創(chuàng)建基本的FRAMESET
FRAMESET頁面與普遍的Web頁面有些不同。雖然仍舊以＜HTML＞和包含標(biāo)題的＜HEAD＞標(biāo)記以及其他腳本開始，但是其內(nèi)容僅僅是表示的各個頁面的版式設(shè)計。因此，不再需要有＜BODY＞元素，只需要＜FRAMESET＞標(biāo)記。
通過＜FRAMESET＞標(biāo)記的＜rows＞和＜cols＞屬性，瀏覽器窗口被分割為一個個格子。＜rows＞和＜cols＞的設(shè)置值可以是固定的像素值，可以是總空間的百分比值，還可以是用*以及一個數(shù)字相乘表示的分割剩余空間的比例值。比如說：
cols="80,20%,*" 分為3列，寬度分別為80像素，窗口寬度的20％，以及剩余寬度
rows="25%,75%" 分為2列，寬度分別為窗口寬度的25％和75％
rows="*,3*" 與上述第2個表示的一樣，分為2列，但表示方法不同：第一列寬度為第二列的1/3
在＜FRAMESET＞和＜/FRAMESET＞之間，用多個＜FRAME＞標(biāo)記表示每個分割區(qū)。col表示從左到右的列，row表示從上到下的行。每個＜FRAME＞有一個src屬性，給出了這個FRAME的內(nèi)容。它可以是瀏覽器能顯示的任何一個合法URL，或者是另外一個FRAMESET。為預(yù)防遞歸現(xiàn)象，一個FRAME不能包含它本身所在的FRAMESET頁面。要用name屬性定義FRAME的名字，這樣就可以在代碼或者腳本程序中引用它。 請看一段基本的FRAMESET代碼：
＜HTML＞
＜HEAD＞
＜TITLE＞Simple FRAMESET＜/TITLE＞
＜/HEAD＞
＜FRAMESET cols="40%,60%" rows="2*,*"＞
＜FRAME name="TopLeft" src="red.htm"＞
＜FRAME name="TopRight" src="green.htm"＞
＜FRAME name="BotLeft" src="blue.htm"＞
＜FRAME name="BotRight" src="white.htm"＞
＜/FRAMESET＞
＜/HTML＞
＜FRAMESET rows="105,*"＞
＜FRAME name="adbanner" src="ad.html"＞
＜FRAMESET cols="40%,60%"＞
＜FRAME name="left" src="red.htm"＞
＜FRAMESET rows="*,*"＞
＜FRAME name="top" src="blue.htm"＞
＜FRAME name="bottom" src="white.htm"＞
＜/FRAMESET＞
＜/FRAMESET＞
＜/FRAMESET＞
FRAME間的鏈接
一個FRAMESET結(jié)構(gòu)的頁面，新文檔只轉(zhuǎn)載進窗口的一部分中，而其他頁面則保持靜態(tài)不變。當(dāng)用戶點擊FRAME中的鏈接時，新內(nèi)容就在同一FRAME內(nèi)打開。要讓新內(nèi)容在其他FRAME中打開，可以設(shè)置＜A＞標(biāo)記的target屬性值為那個FRAME的name值。
而且，我們還可以設(shè)置打開目標(biāo)為當(dāng)前可見的任意一個FRAME，而不局限于本身的FRAMESET。目標(biāo)可能是一個嵌套的FRAMESET中的FRAME，也可能是其他窗口中的FRAME。但是如果目標(biāo)FRAME不存在，就會產(chǎn)生一個帶有目標(biāo)FRAME名字的新窗口。
下面舉個例子說明一下，假設(shè)有一個簡單含2－FRAME的FRAMESET，文件名叫做home.html，代碼如下：
＜HTML＞
＜HEAD＞＜TITLE＞FrommCo home page＜/TITLE＞＜/HEAD＞
＜FRAMESET cols="115,*"＞
＜FRAME src="menu.htm"＞
＜FRAME name="content" src="main.htm"＞
＜/FRAMESET＞
＜/HTML＞
文件menu.htm在左邊的FRAME中，其中有一系列鏈接，點擊它們后新內(nèi)容將在右邊的叫做content的FRAME中打開。下面是menu.html的代碼：
＜HTML＞＜HEAD＞＜/HEAD＞
＜BODY＞＜P＞＜BR＞
＜IMG src="Images/tmp_logo.gif" alt="FrommCo"＞＜P＞
＜A href="main.htm" target="content"＞Main page＜/A＞＜P＞
＜A href="mission.htm" target="content"＞Our mission＜/A＞＜P＞
＜A href="staff.htm" target="content"＞Our staff＜/A＞＜P＞
＜A href="splash.htm" target="_parent"＞FrommCo splash page＜/A＞
＜/BODY＞＜/HTML＞
請注意最后一個鏈接中target的定義為_parent，這屬于4個特殊的保留值。它們是：
_parent：在當(dāng)前FRAMESET位置顯示新href。
_top：在當(dāng)前整個窗口位置顯示新href，比如本身FRAMESET位于另一個FRAMESET中。
_self：強制在當(dāng)前FRAME中顯示新href。
_blank：在新窗口中顯示href。
表示客戶端圖形地圖的＜AREA＞標(biāo)記同樣可以應(yīng)用target屬性，比如：
＜AREA shape=circle coords="75,75,50" href="main.htm" target="content" alt="Main page"＞
還有一種經(jīng)常的情況是：Web頁面中的大部分或者全部鏈接都要求在一個特別的FRAME中打開。這時，可以在頁面的＜HEAD＞代碼區(qū)使用＜BASE＞標(biāo)記設(shè)置默認(rèn)的target，然后再分別定義特殊鏈接的target值。
修飾FRAME
FRAMESET不僅在寬度、高度等方面具有可控制的數(shù)值，在美觀方面也同樣可以精確設(shè)置。
默認(rèn)情況下，F(xiàn)RAMESET的FRAME間有一個凸起的邊沿，表示分割效果。如果不喜歡這個，想營造“無縫連接”的效果，可以在＜FRAME＞標(biāo)記中設(shè)置FRAMEborder=0來消除它。在3.0及高版本的Navigator和Internet Explorer中，如果在＜FRAMESET＞標(biāo)記中設(shè)置FRAMEborder=0，那么除了設(shè)置為FRAMEborder=1的FRAME外，所有其他FRAME的邊沿都將消失。
雖然設(shè)置了FRAMEborder=0，有些瀏覽器仍舊會在FRAME間保留一些邊沿的顏色痕跡。這時，可以在＜FRAMESET＞標(biāo)記中添加FRAMEspacing=0（對Internet Explorer）或者border=0（對Navigator和Opera）實現(xiàn)真正的無縫連接。
請看下面的代碼是如何使用這些屬性的：
＜HTML＞
＜HEAD＞＜TITLE＞FrommCo home page＜/TITLE＞＜/HEAD＞
＜FRAMESET cols="115,*" FRAMEspacing=0 border=0＞
＜FRAME src="menu.htm" FRAMEborder=0 noresize scrolling=no＞
＜FRAME name="content" src="main.htm" FRAMEborder=0＞
＜/FRAMESET＞
＜/HTML＞
上面的代碼中有2個新的屬性：noresize表示鎖住FRAME而不允許使用鼠標(biāo)改變大小，scrolling=no表示屏蔽FRAME的滾動條，scrolling=yes表示允許，scrolling=auto表示根據(jù)顯示內(nèi)容需要自動顯示滾動條。
浮動FRAME
浮動FRAME是HTML4.0規(guī)范中的一個定義，目前的瀏覽器都支持它。
不象FRAMESET表示的分割區(qū)樣子，一個浮動FRAME作為一個內(nèi)置對象存在于Web頁面上，其樣式就象一個頁面上的一個圖形或者一個applet。浮動FRAME使用＜IFRAME＞標(biāo)記，它具有與＜FRAME＞相同的大多數(shù)屬性設(shè)置，包括：name、src、marginwidth、marginheight、FRAMEborder以及scrolling。同時，它還具有與圖形或者applet一樣的height、width和align屬性。
而且，浮動FRAME遵循與普通FRAME一樣的target原則：我們可以通過它的name來指向它。本原則適用于在任一類型FRAME中的浮動FRAME，反之易然。浮動FRAME中的沒有traget的鏈接指向它本身，而_parent鏈接則指向包含＜IFRAME＞的文檔所在的FRAME或者窗口。比如：
＜IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left＞
＜IMG src="Images/noFRAME.gif" alt="You can‘t see the floating FRAME"
width=150 height=200 hspace=10 align=right＞
＜/IFRAME＞＜BR＞
＜A href="one.htm" target="floater"＞Show one.htm＜/A＞＜P＞
＜A href="two.htm" target="floater"＞Show two.htm＜/A＞＜P＞
＜A href="start.htm" target="floater"＞Bring back start.htm＜/A＞
注意，對應(yīng)支持＜IFRAME＞標(biāo)記的瀏覽器，任何位于＜IFRAME＞和＜/IFRAME＞間的內(nèi)容都將忽略。反之，其中的內(nèi)容將顯示出來，這可以用作解釋當(dāng)前瀏覽器不支持＜IFRAME＞。
何時使用FRAME
我們知道，F(xiàn)RAMESET的基本用途就是分割瀏覽器窗口，使得窗口的一部分內(nèi)容改變，而其他部分保持不變。利用這個特性，就可以實現(xiàn)工具欄導(dǎo)航功能，一個FRAME內(nèi)放置靜態(tài)菜單頁面，用戶點擊其中的項目后，在另外的FRAME內(nèi)顯示相關(guān)的內(nèi)容。這樣就可以從整體上減少文件大小，因為不必在每個內(nèi)容頁面中再包含菜單項目。
FRAME有2個明顯的不足：
FRAME從另外的級別上增加了站點的管理，原因在于超級鏈接不僅僅要指向適當(dāng)?shù)捻撁?，而且也會裝載到相關(guān)的FRAME內(nèi)。
另外，大多數(shù)瀏覽器在執(zhí)行“添加書簽”的操作時，只能記錄下FRAMESET的初始位置。不管添加書簽時是位于多么深的FRAMESET中，當(dāng)再次選擇這個書簽時，就會返回到FRAMESET的初始頁面。這就加大了訪問者瀏覽指定內(nèi)容的難度。
但是，如果好好地組織站點信息，使導(dǎo)航操作只有不深的幾層，那么，使用FRAME就能很好地為訪問者服務(wù)。記?。涸L問者都希望簡潔的導(dǎo)航信息。
當(dāng)然，導(dǎo)航并非是使用FRAME的唯一原因，也可以使用FRAME創(chuàng)建交換工具和交換頁面。而且，F(xiàn)RAME的多文檔框架結(jié)構(gòu)非常適于被JavaScript應(yīng)用程序所操作。
用FRAME設(shè)計站點
最常用的FRAME結(jié)構(gòu)就是“菜單－內(nèi)容”FRAMESET。一個FRAME內(nèi)放置導(dǎo)航菜單，另一個FRAME內(nèi)轉(zhuǎn)載子菜單，每個子菜單的鏈接就指向本身。唯一的有target的鏈接都在菜單FRAME內(nèi)。 請看下面的例程代碼：
＜HTML＞＜HEAD＞
＜TITLE＞W(wǎng)elcome to my site!＜/TITLE＞
＜/HEAD＞
＜FRAMESET cols="150,*"＞
＜FRAME name="menu" src="menu.htm"＞
＜FRAME name="content" src="intro.htm"＞
＜/FRAMESET＞
＜BODY＞
＜!--如果是支持FRAME的瀏覽器，則不會顯示下面的內(nèi)容；否則，也顯示出簡單菜單頁面--＞
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＞
用腳本控制導(dǎo)航FRAME
上面介紹了FRAME的HTML代碼結(jié)構(gòu)，現(xiàn)在開始走向更深一步：使用腳本程序控制FRAME。
每個Window對象有一個FRAMEs數(shù)組。對于普通的Web頁面，這個數(shù)組是空的，其屬性length為0。帶有FRAMESET的頁面，按照其上＜FRAME＞標(biāo)記的前后順序，生成一個FRAME數(shù)組。由于FRAMESET所在頁面是每個FRAME的parent窗口，數(shù)組索引從0開始，所以從FRAMESET中引用第3個FRAME時就使用self.FRAMEs[2]，從其他FRAME文檔中引用第3個FRAME時就使用parent.FRAMEs[2]。
FRAME數(shù)組中的每一個成員都是一個窗口，它們具有普通窗口的一切方法、事件以及屬性，并且包括它自己的FRAME數(shù)組（當(dāng)它包含另外一個FRAMESET時）。因此，用腳本去修改一個FRAME的內(nèi)容就象修改它的location.href一樣簡單。
下面舉例說明，假設(shè)一個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中的內(nèi)容。實現(xiàn)代碼如下:
＜a href="javascript:navAll()"＞修改下面3個FRAME的內(nèi)容＜/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＞
用腳本控制動態(tài)FRAME
如果FRAME中變化的內(nèi)容不多，就可以考慮使用腳本程序動態(tài)生成其內(nèi)容。這樣就不用再創(chuàng)建單獨的小HTML頁面，無需從服務(wù)器上下載。創(chuàng)建內(nèi)容的方法與在任何窗口中書寫內(nèi)容一樣，都是通過document對象。
舉個例子說明一下。假設(shè)要在一個FRAME內(nèi)顯示小組成員的相片，并在其下的一個小FRAME內(nèi)顯示該成員的名字等信息。首先建立信息數(shù)組：
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＞鏈接到函數(shù)showMe(n)，由它負(fù)責(zé)根據(jù)索引數(shù)據(jù)創(chuàng)建信息：
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，我們既可以從創(chuàng)建窗口的頁面訪問那個窗口，也可以從這個窗口創(chuàng)建的窗口訪問它。另一方面，F(xiàn)RAMESET中的文檔（包括FRAMESET本身）總是可以訪問和操縱其中每個的JavaScript函數(shù)和變量。比如說，第三個FRAME中有函數(shù)sayGobble(vol)，那么在其他FRAME中就可以使用parent.FRAMEs[2].sayGobble(vol)來引用它。同樣，F(xiàn)RAMESET頁面中的變量myName可以被任何FRAME以parent.myName="Imelda"的命令進行設(shè)置。
不管在其他FRAME中的內(nèi)容如何，在靜態(tài)FRAME或者FRAMESET中的函數(shù)和變量始終保持可用。這個特征非常有價值，不僅可以將通用函數(shù)保存在其中從而壓縮代碼，而且，還可以實現(xiàn)頁面間轉(zhuǎn)換時的狀態(tài)保持。
下面的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事件將設(shè)置FRAMESET頁面的myWord變量為文本輸入框的內(nèi)容。代碼如下：
＜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的數(shù)值，代碼是：
＜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＞
這個例子很有實用價值。比如說，你可以設(shè)定訪問者按一定的次序打開頁面，收集用戶信息，最后定制出用戶特制的顯示內(nèi)容。
談到狀態(tài)維護功能，這個方法不會比使用cookie或CGI更好，因為當(dāng)FRAMESET重載或者退出時，變量值就丟失了。但是，它不要求服務(wù)器端響應(yīng)，也不存在安全問題，因此還是可以小試一把的。
用腳本控制浮動FRAME
用腳本控制普通FRAME與浮動FRAME的方法基本相同，唯一的差別是浮動FRAME按＜IFRAME＞出現(xiàn)的順序定義索引位置。如果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數(shù)組去訪問每一個FRAME。
預(yù)防腳本編程錯誤
盡管FRAME是HTML的一個穩(wěn)定規(guī)范說明，但DOM模型只把它們當(dāng)做HTML元素而不是窗口，因此圍繞FRAME的腳本編程并不是能很周全地定義。這個不足導(dǎo)致了當(dāng)裝載FRAME時會發(fā)生一些腳本執(zhí)行方面的沖突。
立即修改FRAME內(nèi)容的腳本經(jīng)常會產(chǎn)生錯誤。原因在于：瀏覽器通常是先執(zhí)行腳本命令，然后在按照src所示裝入頁面內(nèi)容。
解決方法很直接，就是判斷FRAME內(nèi)容是否裝載完畢。有一個好的處理技巧是以HTML頁面開始所有的FRAME，由它象主FRAMESET報告裝載請看。比如說，有一個FRAMESET頁面，要等裝載完所有的FRAME后才能執(zhí)行函數(shù)goToIt()，那么就將下面的JavaScript程序段放進FRAMESET文檔中：
countDown=FRAMEs.length;
function soundOff() {
countDown--;
if (countDown==0) {
goToIt();
}
}
然后，在每個FRAME頁面的＜BODY＞標(biāo)記中設(shè)置上onLoad="parent.soundOff()"。當(dāng)FRAME頁面裝載并執(zhí)行soundOFF()后，等到countDown 為0時，就表示FRAME完全裝載完畢。
總結(jié)
FRAME是雙刃劍，使用不好會造成混亂的站點結(jié)構(gòu)和外觀，使用得當(dāng)將大大方便用戶的操作方式以及形成清晰的頁面風(fēng)格。相信你看完本文后，會對FRAME有了更親切的認(rèn)識。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
