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