Frame框架在Html中的應用詳解

FRAME（框架）是Web上經常會看到的頁面結構。使用可視Web開發工具（比如Dreamweaver或者Frontpage），雖然可以在WYSIWYG環境中通過簡單的鼠標託拽完成FRAME的構建，但是要實現真正細緻甚至強大的功能，仔細理解FRAME的代碼結構至關重要！你將發現，FRAME原來是這樣的親切易用。

　　創建基本的FRAMESET：

　　FRAMESET頁面與普遍的Web頁面有些不同。雖然仍舊以<HTML>和包含標題的<HEAD>標記以及其他腳本開始，但是其內容僅僅是表示的各個頁面的版式設計。因此，不再需要有<BODY>元素，只需要<FRAMESET>標記。

　　通過<FRAMESET>標記的<rows>和<cols>屬性，瀏覽器窗口被分割爲一個個格子。<rows>和<cols>的設置值可以是固定的像素值，可以是總空間的百分比值，還可以是用*以及一個數字相乘表示的分割剩餘空間的比例值。比如說：

cols="80,20%,*" 分爲3列，寬度分別爲80像素，窗口寬度的20％，以及剩餘寬度
rows="25%,75%" 分爲2行，寬度分別爲窗口寬度的25％和75％
rows="*,3*" 與上述第2個表示的一樣，分爲2行，但表示方法不同：第一列寬度爲第二行的1/3

　　在<FRAMESET>和</FRAMESET>之間，用多個<FRAME>標記表示每個分割區。col表示從左到右的列，row表示從上到下的行。每個<FRAME>有一個src屬性，給出了這個FRAME的內容。它可以是瀏覽器能顯示的任何一個合法URL，或者是另外一個FRAMESET。爲預防遞歸現象，一個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>

　　FRAME間的鏈接：

　　一個FRAMESET結構的頁面，新文檔只轉載進窗口的一部分中，而其他頁面則保持靜態不變。當用戶點擊FRAME中的鏈接時，新內容就在同一FRAME內打開。要讓新內容在其他FRAME中打開，可以設置<A>標記的target屬性值爲那個FRAME的name值。

　　而且，我們還可以設置打開目標爲當前可見的任意一個FRAME，而不侷限於本身的FRAMESET。目標可能是一個嵌套的FRAMESET中的FRAME，也可能是其他窗口中的FRAME。但是如果目標FRAME不存在，就會產生一個帶有目標FRAME名字的新窗口。

　　下面舉個例子說明一下，假設有一個簡單含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中，其中有一系列鏈接，點擊它們後新內容將在右邊的叫做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：在當前FRAMESET位置顯示新href。
　　_top：在當前整個窗口位置顯示新href，比如本身FRAMESET位於另一個FRAMESET中。
　　_self：強制在當前FRAME中顯示新href。
　　_blank：在新窗口中顯示href。
　　表示客戶端圖形地圖的<AREA>標記同樣可以應用target屬性，比如：

　　還有一種經常的情況是：Web頁面中的大部分或者全部鏈接都要求在一個特別的FRAME中打開。這時，可以在頁面的<HEAD>代碼區使用<BASE>標記設置默認的target，然後再分別定義特殊鏈接的target值。

　　修飾FRAME：

　　FRAMESET不僅在寬度、高度等方面具有可控制的數值，在美觀方面也同樣可以精確設置。

　　默認情況下，FRAMESET的FRAME間有一個凸起的邊沿，表示分割效果。如果不喜歡這個，想營造“無縫連接”的效果，可以在<FRAME>標記中設置FRAMEborder=0來消除它。在3.0及高版本的Navigator和Internet Explorer中，如果在<FRAMESET>標記中設置FRAMEborder=0，那麼除了設置爲FRAMEborder=1的FRAME外，所有其他FRAME的邊沿都將消失。

　　雖然設置了FRAMEborder=0，有些瀏覽器仍舊會在FRAME間保留一些邊沿的顏色痕跡。這時，可以在<FRAMESET>標記中添加FRAMEspacing=0（對Internet Explorer）或者border=0（對Navigator和Opera）實現真正的無縫連接。

　　請看下面的代碼是如何使用這些屬性的：

<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而不允許使用鼠標改變大小，scrolling=no表示屏蔽FRAME的滾動條，scrolling=yes表示允許，scrolling=auto表示根據顯示內容需要自動顯示滾動條。

　　浮動FRAME：

　　浮動FRAME是HTML4.0規範中的一個定義，目前的瀏覽器都支持它。

　　不象FRAMESET表示的分割區樣子，一個浮動FRAME作爲一個內置對象存在於Web頁面上，其樣式就象一個頁面上的一個圖形或者一個applet。浮動FRAME使用<IFRAME>標記，它具有與<FRAME>相同的大多數屬性設置，包括：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>

　　注意，對應支持<IFRAME>標記的瀏覽器，任何位於<IFRAME>和</IFRAME>間的內容都將忽略。反之，其中的內容將顯示出來，這可以用作解釋當前瀏覽器不支持<IFRAME>。

　　何時使用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>

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，都位於窗口下部：

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

<a href="javascript:navAll()">修改下面3個FRAME的內容</a>
<SCRIPT language="JavaScript"></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">

</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"></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"：

　　帶有浮動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框架在Html中的應用詳解

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

KubeKey 部署 K8s v1.28.8 實戰

mysql字符集設定總結

我的友情鏈接

兩種轉換mysql數據編碼的方法-latin1轉utf8

php中0,'',null,false,true,FLASE,TREU,array()的相等恆等學習

frameset、frame、noframes和iframe的區別

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結