1. 程式人生 > >frame和iframe的使用與總結

frame和iframe的使用與總結

 1、frame不能脫離frameSet單獨使用,iframe可以;

 2、frame不能放在body中;如下可以正常顯示:  <!--<body>-->   <frameset rows="50%,*">      <frame   name="frame1"   src="test1.htm"/>      <frame   name="frame2"   src="test2.htm"/>   </frameset>  <!--<body>-->    如下不能正常顯示:  <body>   <frameset rows="50%,*">      <frame   name="frame1"   src="test1.htm"/>      <frame   name="frame2"   src="test2.htm"/>   </frameset>   <body>   

 3、巢狀在frameSet中的iframe必需放在body中;如下可以正常顯示:    <body>      <frameset>          <iframe   name="frame1"   src="test1.htm"/>         <iframe   name="frame2"   src="test2.htm"/>       </frameset>     </body>   如下不能正常顯示:      <!--<body>-->      <frameset>          <iframe   name="frame1"   src="test1.htm"/>         <iframe   name="frame2"   src="test2.htm"/>       </frameset>     <!--</body>-->   

   4、不巢狀在frameSet中的iframe可以隨意使用;       如下均可以正常顯示:   <body>      <iframe   name="frame1"   src="test1.htm"/>      <iframe   name="frame2"   src="test2.htm"/>   </body>     <!--<body>-->  

   <iframe   name="frame1"   src="test1.htm"/>       <iframe   name="frame2"   src="test2.htm"/>   <!--</body>-->   

  5、frame的高度只能通過frameSet控制;iframe可以自己控制,不能通過frameSet控制,如:    <!--<body>-->   <frameset rows="50%,*">      <frame   name="frame1"   src="test1.htm"/>      <frame   name="frame2"   src="test2.htm"/>   </frameset>  <!--</body>-->    <body>   <frameset>      <iframe height="30%"  name="frame1"   src="test1.htm"/>      <iframe height="100"  name="frame2"   src="test2.htm"/>   </frameset>  </body>   

   6、如果在同一個頁面使用了兩個以上的iframe,在IE中可以正常顯示,在firefox中只能顯示出第一個;使用兩個以上的frame在IE和firefox中均可正常    以上程式碼在IE7和firefox2.0中測試。     另外相關論壇竊取總結 :-)  

 Frame與Iframe兩者可以實現的功能基本相同,不過Iframe比Frame具有更多的靈活性。  frame是整個頁面的框架,iframe是內嵌的網頁元素,也可以說是內嵌的框架     Iframe標記又叫浮動幀標記,可以用它將一個HTML文件嵌入在一個HTML中顯示。它和Frame標記的最大區別是在網頁中嵌入 的<Iframe></Iframe>所包含的內容與整個頁面是一個整體,而<Frame>< /Frame>所包含的內容是一個獨立的個體,是可以獨立顯示的。另外,應用Iframe還可以在同一個頁面中多次顯示同一內容,而不必重複這段內 容的程式碼。 

2 iframe 可以放到表格裡面。frame 則不行。  <table>  <tr>   <td><iframe id="" src=""></iframe></td><td></td>  </tr>  </table>   

3 frame必須在frameset裡   而frameset不能與body元素共存,也就說有frameset元素的文件只能是一個框架集,不能有別的東東  

 4 IFrame是放在網業的什麼地方都行      但是frame只能放到上下左右四個方向  

 5 iframme   是活動幀      而frame是非活動幀      iframe使用方法如下       <iframe   scr="sourcefile"   frameborder=0   width="width"   height="height"></iframe>  iframe用起來更靈活,不需要frame那麼多講究     而且放的位置也可以自己設   iframe是內嵌的,比較靈活,不過也有不好的地方,就是位置在不同的瀏覽器和解析度下有可能不同,有時會把本來好好的頁面搞得變形    iframe就沒有這個限制   

  6 iframe   可以加在網頁中任何一個地方。       而frame   通常做框架頁   iframe是一個網頁中的子框架,兩網頁間是父子關係             frame是框架,由多個並列的網頁構成  樓上的說得對,iframe是浮動的。就像是浮動面板,而frame是固定的。只能四個方向上的。    你可以直接在網頁裡用一下,看看效果就行了。    

  7 <iframe>是被嵌入在網頁的元素,而<frame>用於組成一個頁面的多個框架!  iframe   更利於版面的設計       frame     一條直一條豎的不美觀   frame的那一條線也可以去掉的呦!只不過,iframe更方便對其進行資料的交換吧!  iframe可以放置到你想放的任意位置,控制起來比frame方便     8iframe是內部幀,可以嵌在一個頁面裡面,設定內部幀的屬性可以使得整體看上去象一個完整的頁面,而不是由多個頁面組成,frame有 frame的好處,比如何多網站,上面放廣告條,左邊放選單,右邊放內容,這樣上邊和左邊的內容都可不動,只重新整理右邊頁面的內容,選擇iframe還是 frame完全看自己的需求。     說白了,用IFrame比用Frame少一個檔案(FrameSet),但支援Frame的瀏覽器比較多。    我為我公司做的網站,整個是用了iframe,linux帶的瀏覽器都不支援,哎呀,醜呀,不過我還是喜歡用iframe     還有iframe可以放在表格裡,然後ifame設定成width=100%   height=100%    
  我就可以只需修改我的表格的寬度和高度,這樣的話有利於排版     其實Frame是一個控制元件      使用方法和Panle相同。     frame是把網頁分成多個頁面的頁面。它要有一個框架集頁面frameset      iframe是一個浮動的框架,就是在你的頁面裡再加上一個頁面,    <frame>用來把頁面橫著或豎著切開,      <iframe>用來在頁面中插入一個矩形的小視窗     Frame一般用來設定頁面佈局,將整個頁面分成規則的幾塊,每一塊裡面包含一個新頁面.      iframe用來在頁面的任何地方插入一個新的頁面.            因此,Frame用來控制頁面格式,比如一本書,左邊是章節目錄,右邊是正文,正文很長,看的時候要拖動,但又不想目錄也被拖動得開不到了.因此最好將頁面用Frame分成規則的2頁,一左一右.             而iframe則更靈活,不要求將整個頁面劃分,你可以在頁面任何地方用iframe嵌入新的頁面.    我個人認為:      <frame>用於全頁面      <iframe>只用於區域性     IFRAME             --------------------------------------------------------------------------------        

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

js 操作frameset frame 物件

框架程式設計概述
一個HTML頁面可以有一個或多個子框架,這些子框架以<iframe>來標記,用來顯示一個獨立的HTML頁面。這裡所講的框架程式設計包括框架的自我控制以及框架之間的互相訪問,例如從一個框架中引用另一個框架中的JavaScript變數、呼叫其他框架內的函式、控制另一個框架中表單的行為等。
框架間的互相引用
一個頁面中的所有框架以集合的形式作為window物件的屬性提供,例如:window.frames就表示該頁面內所有框架的集合,這和表單物件、連結物件、圖片物件等是類似的,不同的是,這些集合是document的屬性。因此,要引用一個子框架,可以使用如下語法:
window.frames["frameName"];
window.frames.frameName
window.frames[index]
其中,window字樣也可以用self代替或省略,假設frameName為頁面中第一個框架,則以下的寫法是等價的:
self.frames["frameName"]
self.frames[0]
frames[0]
frameName
每個框架都對應一個HTML頁面,所以這個框架也是一個獨立的瀏覽器視窗,它具有視窗的所有性質,所謂對框架的引用也就是對window物件的引用。有了這個window物件,就可以很方便地對其中的頁面進行操作,例如使用window.document物件向頁面寫入資料、使用window.location屬性來改變框架內的頁面等。
下面分別介紹不同層次框架間的互相引用:
1.父框架到子框架的引用
知道了上述原理,從父框架引用子框架變的非常容易,即:
window.frames["frameName"];
這樣就引用了頁面內名為frameName的子框架。如果要引用子框架內的子框架,根據引用的框架實際就是window物件的性質,可以這樣實現:
window.frames["frameName"].frames["frameName2"];
這樣就引用到了二級子框架,以此類推,可以實現多層框架的引用。
2.子框架到父框架的引用
每個window物件都有一個parent屬性,表示它的父框架。如果該框架已經是頂層框架,則window.parent還表示該框架本身。
3.兄弟框架間的引用
如果兩個框架同為一個框架的子框架,它們稱為兄弟框架,可以通過父框架來實現互相引用,例如一個頁面包括2個子框架:
<frameset rows="50%,50%">
     <frame src="1.html" name="frame1" />
     <frame src="2.html" name="frame2" />
</frameset>
在frame1中可以使用如下語句來引用frame2:
self.parent.frames["frame2"];
4.不同層次框架間的互相引用
框架的層次是針對頂層框架而言的。當層次不同時,只要知道自己所在的層次以及另一個框架所在的層次和名字,利用框架引用的window物件性質,可以很容易地實現互相訪問,例如:
self.parent.frames["childName"].frames["targetFrameName"];
5.對頂層框架的引用
和parent屬性類似,window物件還有一個top屬性。它表示對頂層框架的引用,這可以用來判斷一個框架自身是否為頂層框架,例如:
//判斷本框架是否為頂層框架
if(self==top){
       //dosomething
}




改變框架的載入頁面
對框架的引用就是對window物件的引用,利用window物件的location屬性,可以改變框架的導航,例如:
window.frames[0].location="1.html";
這就將頁面中第一個框架的頁面重定向到1.html,利用這個性質,甚至可以使用一條連結來更新多個框架。
<frameset rows="50%,50%">
     <frame src="1.html" name="frame1" />
     <frame src="2.html" name="frame2" />
</frameset>
<!--somecode-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a>
<!--somecode-->
引用其他框架內的JavaScript變數和函式
在介紹引用其他框架內JavaScript變數和函式的技術之前,先來看以下程式碼:
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
      alert("hello,ajax!");
}
window.hello();
//-->
</script>
如果運行了這段程式碼,會彈出“hello,ajax!”的視窗,這正是執行hello()函式的結果。那為什麼hello()變成了window物件的方法呢?因為在一個頁面內定義的所有全域性變數和全域性函式都是作為window物件的成員。例如:
var a=1;
alert(window.a);
就會彈出對話方塊顯示為1。同樣的原理,在不同框架之間共享變數和函式,就是要通過window物件來呼叫。
例如:一個商品瀏覽頁面由兩個子框架組成,左側表示商品分類的連結;當用戶單擊分類連結時,右側顯示相應的商品列表;使用者可以單擊商品旁的【購買】連結將商品加入購物車。
在這個例子中,可以利用左側導航頁面來儲存使用者希望購買的商品,因為當用戶單擊導航連結時,變化的是另外一個頁面,即商品展示頁面,而導航頁面本身是不變的,因此其中的JavaScript變數不會丟失,可以用來儲存全域性資料。其實現原理如下:
假設左側頁面為link.html,右側頁面為show.html,頁面結構如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<frameset cols="20%,80%">
      <frame src="link.html" name="link" />
      <frame src="show.html" name="show" />
</frameset>
</html>
在show.html中展示的商品旁邊可以加入這樣一條語句:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">加入購物車</a>
其中link表示導航框架,在link.html頁面中定義了arrOrders陣列來儲存商品的id,函式addToOrders()用來響應商品旁邊【購買】連結的單擊事件,它接收的引數id表示商品的id,例子中是一個id為32068的商品:
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
function addToOrders(id){
      arrOrders.push(id);
}
//-->
</script>
這樣,在結帳頁面或是購物車瀏覽頁面就可以用arrOrders來獲取所有準備購買的商品。
框架可以使一個頁面劃分為功能獨立的多個模組,每個模組之間彼此獨立,但又可以通過window物件的引用來建立聯絡,是Web開發中的一個重要機制。