淺談Iframe和FRAME的區別

轉載的資料:

淺談Iframe和FRAME的區別


一、Iframe標記的使用 


 提起Iframe,可能你早已將之扔到“被遺忘的角落”了,不過,說起其兄弟Frame就不會陌生了。Frame標記即幀標記,我們所說的多幀結構就是在一個瀏覽器窗口中顯示多個HTML文件。


現在,我們遇到一種很現實的情況:如有一個教程,是一節一節地上,每頁末尾做一個“上一節“、“下一節“的鏈接,除了每節教程內容不同之外,頁面其它部分內容都是相同的,如果一頁一頁地做笨頁面,這似乎太讓人厭煩了,這時突發奇想,如果有一種方法讓頁面其它地方不變,只將教程做成一頁一頁的內容頁,不含其它內容,在點擊上下翻頁鏈接時,只改變教程內容部分,其它保持不變,這樣,一是省時,另則以後如教程有個三長兩短的變動,也很方便,不致於牽一髮而動全軍了;更重要的是將那些廣告Banner、欄目列表、導航等幾乎每頁的都有的東西只下載一次後就不再下載了。


 Iframe標記,又叫浮動幀標記,你可以用它將一個HTML文檔嵌入在一個HTML中顯示。它不同於Frame標記最大的特徵即這個標記所引用的HTML文件不是與另外的HTML文件相互獨立顯示,而是可以直接嵌入在一個HTML文件中,與這個HTML文件內容相互融合,成爲一個整體,另外,還可以多次在一個頁面內顯示同一內容,而不必重複寫內容,一個形象的比喻即“畫中畫“電視。


 現在我們談一下Iframe標記的使用。


 Iframe標記的使用格式是:


 <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

 src:文件的路徑,既可是HTML文件,也可以是文本、ASP等;

 width、height:"畫中畫"區域的寬與高;


 scrolling:當SRC的指定的HTML文件在指定的區域不顯不完時,滾動選項,如果設置爲NO,則不出現滾動條;如爲Auto:則自動出現滾動條;如爲Yes,則顯示; 


 FrameBorder:區域邊框的寬度,爲了讓“畫中畫“與鄰近的內容相融合,常設置爲0。 比如:


 <Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe> 


 二、父窗體與浮動幀之間的相互控制 


 在腳本語言與對象層次中,包含Iframe的窗口我們稱之爲父窗體,而浮動幀則稱爲子窗體,弄清這兩者的關係很重要,因爲要在父窗體中訪問子窗體或相反都必須清楚對象層次,才能通過程序來訪問並控制窗體。


 1、在父窗體中訪問並控制子窗體中的對象       在父窗體中,Iframe即子窗體是document對象的一個子對象,可以直接在腳本中訪問子窗體中的對象。 現在就有一個問題,即,我們怎樣來控制這個Iframe,這裏需要講一下Iframe對象。


當我們給這個標記設置了ID 屬性後,就可通過文檔對象模型DOM對Iframe所含的HTML進行一系列控制。 比如在example.htm裏嵌入test.htm文件,並控制test.htm裏一些標記對象: 


 <Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe> 


test.htm文件代碼爲:


 <html> <body> <h1 id="myH1">hello,my boy</h1> </body> </html> 


 如我們要改變ID號爲myH1的H1標記裏的文字爲hello,my dear,則可用: document.myH1.innerText="hello,my dear"(其中,document可省) 在example.htm文件中,Iframe標記對象所指的子窗體與一般的DHTML對象模型一致,對對象訪問控制方式一樣,就不再贅述。



 2、在子窗體中訪問並控制父窗體中對象       在子窗體中我們可以通過其parent即父(雙親)對象來訪問父窗口中的對象。 如example.htm:


 <html>

 <body οnclick="alert(tt.myH1.innerHTML)"> 

  <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe> 

 <h1 id="myH2">hello,my wife</h1> 

 </body> 

 </html> 


 如果要在frame1.htm中訪問ID號爲myH2中的標題文字並將之改爲"hello,my friend",我們就可以這樣寫: parent.myH2.innerText="hello,my friend" 這裏parent對象就代表當前窗體(example.htm所在窗體),要在子窗體中訪問父窗體中的對象,無一例外都通過parent對象來進行。 Iframe雖然內嵌在另一個HTML文件中,但它保持相對的獨立,是一個“獨立王國“喲,在單一HTML中的特性同樣適用於浮動幀中。 試想一下,通過Iframe標記,我們可將那些不變的內容以Iframe來表示,這樣,不必重複寫相同的內容,這有點象程序設計中的過程或函數,減省了多少繁瑣的手工勞動!另外,至關重要的是,它使頁面的修改更爲可行,因爲,不必因爲版式的調整而修改每個頁面,你只需修改一個父窗體的版式即可了。


 有一點要注意,Nestscape瀏覽器不支持Iframe標記,但在時下IE的天下,這似乎也無大礙,廣泛採用Iframe標記,既爲自己(網站)着了想,又爲網友節省了網費,何樂而不爲? 


 浮動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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章