VS2005里Frameset的使用方法
一. 建立Frame
1.建立一個基本的Frame
2.建立frame之間的鏈接
3.美化你的Frame
4.浮動(float)Frame
二. 使用Frame
1.當我們使用Frame
2.設計一個含框架(Frame)的站點
三. 關于Frame的腳本
1.Frame導航的腳本
2.動態Frames腳本
3.Frame窗口間的腳本影響
4.浮動Frame的腳本
5.預防腳本出錯
-----------------------------------------------------
前言
Frame是HTML中用來設置框架的標簽。框加可以在一個頁面里開設多個窗口，以滿足不同的設計需要，例如：將網站的菜單導航部分固定在一個窗口中，可以減少相同頁面下載時間。從Navigator 2.0允許使用Frame標簽開始，現在大部分的瀏覽器都支持frame標簽，并且已經成為HTML 4.0的標準規范。我們的文章分三部分：
一. 建立Frame
學習Frame標簽的最好辦法是直接建立Frame網頁。
二. 使用Frame
熟練掌握Frame，可以成為你設計制作的得力助手。使用不好，則會產生麻煩討厭的結果。我們將幫助你正確使用Frame，如果你已經建立了Frame網頁，我們可以提供關于更好的組織構架frame的一些建議。
三. 關于Frame的腳本
已經有相當多的關于Frame的控制腳本，可以幫助你建立多樣的，動態的Frame。
----------------
一. 建立Frame
----------------
1.建立一個基本的Frame
一個frame頁的HTML原代碼和普通的網頁代碼不完全相同。它也樣有<HTML>標簽和<HEAD>標簽，可以包含網頁標題和一些腳本或者meta標簽，但是因為Frame中顯示的是其他頁面，所以在內容上，使用<FRAMESET>替代<BODY>標簽。
<FRAMESET>標簽中用來橫向，縱向劃分瀏覽器窗口的屬性是<rows>和<cols>，通過它們可以設置橫向或縱向分割的尺寸。設置方法有三種：1.使用精確的pix數值，2.使用相對百分比，3.使用*號。例如：
cols="80,20%,*" 是指縱向分80 pixels, 瀏覽器窗口寬度的20%, 和剩余的部分三個窗口
rows="25%,75%" 是指將瀏覽器窗口分為上下兩個窗口，上面占25%,下面占75%
rows="*,3*" 和上一句的意思一樣，分成上面1/4，下面3/4的兩個窗口
在<FRAMESET>和</FRAMESET>標簽之間，你需要為每一個窗口設置<FRAME>標簽，標簽里設置該窗口的名稱和所顯示的頁面URL。注意：窗口名稱要不同，便于將來對該窗口進一步操作。例如：
<HTML>
<HEAD>
<TITLE>簡單的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'和'cols'屬性建立一個四方格樣子的框架，frame的設置默認的是從左面到右面，從上面到下面。
要制作非格子狀的框架，你可以嵌套<FRAMESET>,在一個窗口中再劃分出子窗口，只要用<FRAMESET>代替<FRAME>標簽。同樣，也可以在子窗口里再設置它的rows,cols，建立子窗口的子窗口。例如：下面這段代碼顯示了三層<FRAMESET>嵌套的四個窗口：
<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>
2.建立frame之間的鏈接
在一個含框架的靜態頁面中，點擊某個窗口中的鏈接來調用新的頁面，新頁面只會顯示在這個窗口中。但是，如果我希望點擊一個窗口中的鏈接，內容顯示在另外一個窗口內，應該怎樣做呢？就象常見的點擊左列菜單，右面主窗口中顯示變化內容。你可以這樣實現，在鏈接標簽<a>的中增加target屬性來指定要鏈接Frame的name。用target屬性可以指定當前瀏覽器窗口中任何存在的frame頁。如果該frame頁不存在，將會打開一個新窗口。
例如：你現在有一個簡單的含左右兩個窗口的Frame頁面，文件名為home.html，原代碼為:
<HTML>
<HEAD><TITLE>My home page</TITLE></HEAD>
<FRAMESET cols="115,*">
<FRAME src="menu.htm">
<FRAME name="content" src="main.htm">
</FRAMESET>
</HTML>
你需要點擊左列窗口menu.htm中的鏈接，變化內容顯示在右列名為content的窗口中，那么menu.htm的代碼可以這樣寫：
<HTML><HEAD></HEAD>
<BODY>
<A href="main.htm" target="content">Main page</A><P>
<A href="menu1.htm" target="content">menu1</A><P>
<A href="menu2.htm" target="content">menu2</A><P>
<A href="menu3.htm" target="_blank">menu3</A>
</BODY></HTML>
其中target="content"就是指將鏈接的內容顯示在name為content的窗口中。最后的target="_blank"是target標簽的保留參數，意思是將鏈接打開在一個新窗口中。同樣的保留參數還有：
"_parent"是指將鏈接內容顯示在父窗口中；
"_top"是指將鏈接內容顯示在整個窗口中；
"_self"是指將鏈接內容顯示在自己當前的frame窗口中。
target屬性同樣可以用在map圖的<AREA>標簽中,一張圖的不同部分可以鏈接到不同的frame窗口中，例如：
<AREA shape=circle coords="75,75,50"
href="main.htm" target="content"
alt="Main page">
如果一個頁面內大部分或者所有的鏈接都指向同一個frame窗口，你可以用<BASE>標簽在此頁的<HEAD>區設置默認的鏈接frame窗口，例如：<BASE target="content">，如果有特殊的鏈接，則單獨設置。
注意：<FRAME>標簽中必須設置src屬性，如果你希望初始頁是空白頁，必須在src中指定一個空白頁。
3.美化你的Frame
Frame的普通設置已經沒有問題了。瀏覽器開發商又為<FRAME>增加了許多屬性來幫助網頁設計師美化框架，以滿足不同的設計需求。
默認的，Frame的不同窗口中間有凸起的邊框為界。現在你可以去掉這些邊框，使不同窗口完美的結合在一起，看上去象是一個單獨的完整頁面。在HTML 4.0中，在<FRAME>標簽中設置frameborder=0屬性，就可以消除邊框。Netscape3.0和IE3.0以上版本瀏覽器都支持這個屬性。你如果需要保留邊框，可以將frameborder設置為1。
不同的瀏覽器還提供一些特有的frame屬性，用來設置彩色的邊框。因此為了確保frame的框架不被顯示出來，你還必須在<FRAMESET>標簽里增加兩個屬性：針對InternetExplorer瀏覽器設置framespacing=0,針對NC和Opera瀏覽器設置border=0。例如：
<HTML>
<HEAD><TITLE>My 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>
在我們上面的例子中，你會注意到有更多的屬性需要設置。例如你可以用鼠標拖動隨意改變frame窗口的大小。我們可以用'noresize'屬性來鎖定這一功能。同樣的可以用'scrolling=no'屬性來禁止滾動條的出現，如果需要滾動條可以設置為'scrolling=yes'，默認設置是滾動條在內容超出窗口尺寸時自動出現。
還有兩個<FRAME>屬性：'marginheight'和'marginwidth'，設置確切的pixel數值可以設定頁面內容和邊框的距離。通常我們設置為0，如果不設置，它的屬性將采用瀏覽器的默認設置。
4.浮動(float)Frame
目前，浮動Frame只有IE3.0以上版本支持，然而，它們已經被收錄到HTML 4.0標準規范中。在NC5.0以上版本也開始支持這一效果。
和一般Frame不同，浮動Frame類似一個物件直接包含在普通頁面里，看上去更象是一張圖片，一個java applet。設置浮動frame使用<IFRAME>標簽，<IFRAME>標簽有著<FRAME>標簽的大部分屬性，象:name,src,marginwidth,marginheight, frameborder, 和scrolling，但是它又有類似圖片的height,width和align屬性。(IE瀏覽器甚至支持非標準的hspace和vspace屬性。)
浮動frame和標準frame有一樣的target屬性規則：如果你想鏈接到它的父窗口，同樣可以直接target父窗口的名稱，這個規則適用于浮動Frame在其他frame窗口中。例如：
<IFRAME name="floater" src="start.htm"
width=150 height=200 hspace=10 align=left>
<p>你的瀏覽器不支持IFRAME</p>
</IFRAME><BR>
<A href="one.htm"
target="floater">顯示one.htm</A><P>
<A href="two.htm"
target="floater">顯示two.htm</A><P>
<A href="start.htm"
target="floater">返回start.htm</A>
注意：<IFRAME>也是圍堵標簽，需要以</IFRAME>標志結束。如果瀏覽器不支持<IFRAME>，所有放在<IFRAME>和</IFRAME>之間的內容將被忽視，上面的例子中你只能看到<IFRAME>下面的連接和其中的文字。
浮動frame同樣支持用百分比或者具體數值設置高和寬。
----------------
二. 使用Frame
----------------
1.當我們使用Frame
使用Frame的目的是劃分窗口，通過這個方法，可以只改變頁面的部分內容或者使頁面的一部分可以卷動。設計師們常常使用Frame來設計工具(菜單)條，使菜單部分不變，內容部分隨菜單的點擊而變化。這樣可以減少下載文件的大小，因為頁面中相同的菜單部分可以不需要重新下載。
使用Frame，大量的小頁面文件增加了站點管理的復雜性和層次。每個鏈接你都需要考慮是否連接到正確的頁面，正確的窗口。
另一個frame應用問題是：大部分瀏覽器的bookmark只支持最初的框架(最外面的頁面)，如果你進入frame中多層后，希望bookmark子窗口的頁面，你得到的只能是最初的Frame頁面。這個限制使讀者很難直接返回到一個特定的子頁面。然而，如果你的站點信息組織得很好，導航清晰，層次不深，Frame可以工作得很好。即使訪問者必須點擊多層，也可以得到高效簡捷的導航。
使用frame不單單為了導航方便，它同樣可以用來建立動態的交互性頁面，當前大部分瀏覽器都支持這個功能。它可以和javascript配合建立復雜的多文件結構。
2.設計一個含框架(Frame)的站點
很多流行的網頁制作工具可以幫助你方便的建立Frame頁面，幫助你設置正確的鏈接target。但即使你是手工寫你的frame站點，建立和管理frame，導航都是很容易的。你甚至可以為不支持frame瀏覽器的用戶提供可以瀏覽的頁面內容。
在常見的'菜單-內容'框架結構中，將導航菜單和內容放在不同的兩個frame窗口中，點擊菜單，內容顯示在另外窗口中。同時也可以設置多級菜單，點擊主菜單，在同一個frame窗口中顯示子菜單，點擊子菜單，內容顯示在另外的內容窗口中。在子菜單中點擊返回，可以回到上一級的主菜單。
用這種方法也可以為不支持Frame的瀏覽器制作導航。因為Frame頁面不需要<BODY>標簽，支持frame的瀏覽器在讀到<BODY>標簽時會忽略跳過；而不支持frame的瀏覽器會忽視<FRAMESET>標簽去處理<BODY>的內容。根據這個特性，我們可以同時設置<FRAMESET>和<BODY>標簽內容，這樣可以使各種瀏覽器的用戶都可以看到正確的內容。例如：
<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>
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>
在HTML 4.0標準規范中提供一個<NOFARMES>標簽用來包住支持frame瀏覽器忽略的內容。例如<BODY>中的內容。但是Navigator 4.0和以下版本不支持<NOFRAMES>標簽，所以還是需要用上例的方法來設置frame頁面。
----------------
三. 關于Frame的腳本
----------------
1.Frame導航的腳本
當你熟練掌握了HTML，你很快就會想知道：如何點擊一個連接同時改變兩個Frame窗口的內容。這就需要特定的javascript腳本來實現。
每個窗口物件都有一個frames數組特性，在一個普通的網頁中，這個數組是空的，長度為0；在含frame窗口的頁面中，另外設有一個frame的索引來排列各子窗口的順序(其中設置frameset的頁面是各子窗口頁面的父窗口)。所以，你可以在父窗口中用self.frames[2]定義第三個窗口(注意，索引數值是從0開始的)；或者在其它子窗口中用parent.frames[2]來定義第三個窗口。
在javascript中，每個窗口內的物件都可以調用這個窗口的特性，例如方法，事件，屬性，包括frames數組，所以改變一個子窗口中的內容就非常簡單了，只需要修改它的location.herf屬性。舉例說明：下面建立一個上下兩窗口的框架，其中下面的窗口又劃分為三個一樣的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>
要點擊上面窗口link.htm中的鏈接，同時改變下面窗口中三個子窗口內容，可以加入下面的功能代碼并將鏈接設置為href="java script:navAll()":
<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頁面中已經包含其他的jacascript腳本，它們也將照常工作。注意很重要的一點，你的<FRAME>標簽中必須設置src屬性，否則腳本無法正常工作。
2.動態Frames腳本
如果一個frame內容只有少量的信息，采用腳本來顯示內容的效率常常比獨立的HTML網頁高，因為普通HTMl頁面必須從服務器上重新調閱，而腳本可以直接在客戶端生成一些簡單的頁面。
用這種方法你可以寫任何內容到任何窗口，甚至整個frame文檔。不同之處就是你可以寫不同的內容在同樣的窗口，而不需要使用任何DHTML。
假設你想放自己部門員工的一組照片在一個Frame窗口中，鼠標點擊照片時，在照片下方的frame窗口中顯示他們的名稱，職務。那么你可以用下面的一段javascript腳本來代替建立獨立的網頁。首先建立一個數組，用來存放員工的名稱和職務：
empID = new Array();
empID[0] = 'Dana, CEO';
empID[1] = 'Tom, senior editor';
empID[2] = 'Percy, head designer';
empID[3] = 'Mike, astrologer';
然后在照片上建立map圖，使不同的鏈接區域<AREA>鏈接到showMe(n)功能,以顯示不同人的信息。就象下面代碼表示的，我們用javascript在frame窗口中寫入一個簡單的頁面：
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();
}
用腳本生成新頁面并不一定需要類似上面的靜態數組，它們也可以隨機生成或者由客戶定制。
3.Frame窗口間的腳本影響
單獨使用javascript，窗口間的影響是有限的，你只能通過創建它的窗口頁面來檢測或訪問這個窗口。但是使用另外的方法：利用Frame的特性，窗口間的javasript功能和變量可以互相訪問和操作。例如，如果第三個frame子窗口的頁面代碼中有sayGobble(vol)功能函數，這個功能相對其它子窗口的調用格式為parent.frames[2].sayGobble(vol),同樣的，父窗口中的變量可以在子窗口中聲明為parent.myName='Imelda'。
在一個靜態的frame框架中的功能函數和變量，可以讀取或寫入到其他的frame頁面。這個功能不但可以有效的利用通用的功能，更加可以維持數據到令一個框架窗口。
下面的框架頁面只包含一個frame頁面--query.htm，并聲明了變量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的鏈接。鏈接的鼠標點擊事件將把輸入的內容寫入到父窗口的myWord變量中，就向這樣：
<HTML><HEAD></HEAD>
<BODY>
<FORM name="myForm">
<INPUT type=text size=12 name="myText">
<P>
<AonClick="parent.myWord=myText.value"
href="result.htm">點擊這里看你的輸入文字用黃色字體顯示在藍色背景上</A>
</FORM>
</BODY></HTML>
新的頁面--result.htm，刷新并寫入query.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">重新再來一次</a>
</BODY></HTML>
這個簡單的例子有著廣泛的應用，你可以引導訪問者按你設定的順序瀏覽網頁，你也可以根據客戶輸入的數據定制特別的頁面。
在保存數據方面，這個方法并不能替代cookies或者CGI，因為當你一旦關閉或者刷新整個框架頁面，數據將會丟失。這種方法的好處是不需要服務器特別權限的支持，也不會給安全上帶來什么問題。
4.浮動Frame的腳本
支持浮動frame的瀏覽器同樣支持在IFRAME中使用類似普通frame的腳本。唯一不同的地方是：普通無框架頁面可以建立一個frames索引。浮動frame建立索引是根據HTML代碼中的<IFRAME>順序。類似普通frame，浮動frame中每一個元素都遵循窗口物件的特性。
在IFRAME中保證腳本安全執行，你必須確認窗口中的frames.length不為0。例如，在下面的例子中，鏈接的target是浮動frame,內容顯示在<IFRAME>中，如果浮動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的頁面就是這個frame的父窗口。所以多個浮動frame之間可以通過父窗口的parent.frames數組屬性來訪問。
5. 預防腳本出錯
雖然HTML的frame有標準的規范說明，但是DOM(Documentation Object Model 參見http://www.w3.org/TR/REC-DOM-Level-1/)的第一級只將它定義為一個HTML元素，而不是一個窗口元素。有關frame的javascript行為(behavior)沒有明確的定義，這個定義的缺乏將使得在讀取frame框架的時候，腳本會發生沖突。
第一個矛盾就是頁面的onload和onunload事件是和<BODY>標簽相關聯的，而<FRAMESET>頁面卻忽略了<BODY>標簽。目前的做法是將這些事件放置在frame框架的最上面的窗口頁面中，也就是第一個調入的頁面。但有些3.0的瀏覽器不支持這樣的做法。
在即時修改frame頁面內容的時候，許多瀏覽器同樣會發生腳本出錯。出錯的原因是：<FRAME>標簽中定義了頁面內容，而在后面的腳本中卻要求讀取或寫入其他的東西，兩者發生沖突。這些瀏覽器常常執行javascript腳本的命令，又繼續讀取最初設定的頁面代碼，從而產生javascript error信息。這些問題的解決方案是在你開始操作frame之前，確認所有frame頁面讀取完畢。這有一個好的辦法：就是使你的frame初始頁面盡量簡單，并在讀取完畢后報告。
例如：假設您有一個框架頁面需要在讀取完畢后執行goToIt()功能，將下面的javascript腳本放入最初frameset頁面：
countDown=frames.length;
function soundOff() {
countDown--;
if (countDown==0) {
goToIt();
}
}
然后在每個子窗口的頁面代碼<BODY>標簽里加入onLoad="parent.soundOff()"，當所有frame頁面都被讀取并執行soundOff()功能后，countDown變量值為0，開始執行goTOIt()。