1. 程式人生 > >詳解iframe與frame的區別

詳解iframe與frame的區別

iframe與frame的區別

一、使用iframe的優缺點

優點:

  1.程式調入靜態頁面比較方便;
  2.頁面和程式分離;

缺點:

  1.iframe有不好之處:樣式/指令碼需要額外鏈入,會增加請求。另外用js防盜鏈只防得了小偷,防不了大盜。
  2.iframe好在能夠把原先的網頁全部原封不動顯示下來,但是如果用在首頁,是搜尋引擎最討厭的.那麼你的網站即使做的在好,也排不到好的名次!如果是動態網頁,用include還好點!但是必須要去除他的<html><head><title><body>標籤! 
  3.框架結構有時會讓人感到迷惑,特別是在多個框架中都出現上下、左右滾動條的時候。這些滾動條除了會擠佔已經特別有限的頁面空間外,還會分散訪問者的留心力。訪問者遇到這種站點往往會立刻轉身離開。他們會想,既然你的主頁如此混亂,那麼站點的其他部分也許更不值得閱讀。(這裡面本人的觀點就是子框架不要出現滾動條,視窗的滾動條只能有由主頁面來控制)

  4.連結導航疑問。運用框架結構時,你必須保證正確配置所有的導航連結,如不然,會給訪問者帶來很大的麻煩。比如被連結的頁面出現在導航框架內,這種情況下訪問者便被陷住了,因為此時他沒有其他地點可去。
  5.呼叫外部頁面,需要額外呼叫css,給頁面帶來額外的請求次數;

二、為什麼少用iframe

  iframes 提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但我們需要慎重的使用iframe。iframe的建立比其它包括scripts和css的 DOM 元素的建立慢了 1-2 個數量級。

  使用 iframe 的頁面一般不會包含太多 iframe,所以建立 DOM 節點所花費的時間不會佔很大的比重。但帶來一些其它的問題:onload 事件以及連線池(connection pool)。

1.Iframes 阻塞頁面載入

  及時觸發 window 的 onload 事件是非常重要的。onload 事件觸發使瀏覽器的 “忙” 指示器停止,告訴使用者當前網頁已經載入完畢。當 onload 事件載入延遲後,它給使用者的感覺就是這個網頁非常慢。

  window 的 onload 事件需要在所有 iframe 載入完畢後(包含裡面的元素)才會觸發。在 Safari 和 Chrome 裡,通過 JavaScript 動態設定 iframe 的 SRC 可以避免這種阻塞情況。

2.唯一的連線池

  瀏覽器只能開少量的連線到web伺服器。比較老的瀏覽器,包含 Internet Explorer 6 & 7 和 Firefox 2,只能對一個域名(hostname)同時開啟兩個連線。這個數量的限制在新版本的瀏覽器中有所提高。Safari 3+ 和 Opera 9+ 可同時對一個域名開啟 4 個連線,Chrome 1+, IE 8 以及 Firefox 3 可以同時開啟 6 個。你可以通過這篇文章檢視具體的資料表:Roundup on Parallel Connections.

  有人可能希望 iframe 會有自己獨立的連線池,但不是這樣的。絕大部分瀏覽器,主頁面和其中的 iframe 是共享這些連線的。這意味著 iframe 在載入資源時可能用光了所有的可用連線,從而阻塞了主頁面資源的載入。如果 iframe 中的內容比主頁面的內容更重要,這當然是很好的。但通常情況下,iframe 裡的內容是沒有主頁面的內容重要的。這時 iframe 中用光了可用的連線就是不值得的了。一種解決辦法是,在主頁面上重要的元素載入完畢後,再動態設定 iframe 的 SRC。

  美國前 10 大網站都使用了 iframe。大部分情況下,他們用它來載入廣告。這是可以理解的,也是一種符合邏輯的解決方案,用一種簡單的辦法來載入廣告服務。但請記住,iframe 會給你的頁面效能帶來衝擊。只要可能,不要使用 iframe。當確實需要時,謹慎的使用他們。

三、iframe和frame的區別

1、frame不能脫離frameSet單獨使用,iframe可以;
2、frame不能放在body中;

如下可以正常顯示:

<!--<body>-->
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<!--<body>-->

如下不能正常顯示:

<body>
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<body>

3、巢狀在frameSet中的iframe必需放在body中;
如下可以正常顯示:

<body>
<frameset> 
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
</body>

如下不能正常顯示:

<!--<body>-->
<frameset> 
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<!--</body>-->

4、不巢狀在frameSet中的iframe可以隨意使用;

如下均可以正常顯示:

<body>
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</body> 
<!--<body>-->
<iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
<!--</body>-->

5、frame的高度只能通過frameSet控制;iframe可以自己控制,不能通過frameSet控制,如:

<!--<body>-->
<frameset rows="50%,*">
<frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
<!--</body>-->
<body>
<frameset>
<iframe height="30%" name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> 
<iframe height="100" name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> 
</frameset> 
</body>

6、如果在同一個頁面使用了兩個以上的iframe,在IE中可以正常顯示,在firefox中只能顯示出第一個(firefox已經改進,這個問題已經不存在了);使用兩個以上的frame在IE和firefox中均可正常

小結:

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

◆◆下面簡要說明一下<iframe>標籤的用法與屬性◆◆

  一、<iframe>也應該是框架的一種形式,它與<frame>不同的是,iframe可以嵌在網頁中的任意部分。我們舉第一個例子,具體程式碼如:
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,這裡的URL可以是相對路徑,也可以是絕對路徑

width表示寬度,height表示高度,可根據實際情況調整。
scrolling表示是否顯示頁面滾動條,可選的引數為auto、yes、no,如果省略這個引數,則預設為auto。

  二、如何實現頁面上的超連結指向這個嵌入的網頁
只要給這個iframe命名就可以了。方法是<iframe name=**>,例如我命名為player,寫入這句HTML語言< iframe width=640 height=25 name=player frameborder=0 src=http://www.cuiz.net/player.htm> </iframe>,
然後,網頁上的超連結語句應該寫為:<a href=URL target=cuiz>開啟播放器</a>

Frameset屬性

首先我們瞭解下一 Frameset標籤 的相關屬性:

<frameset cols=數字或比例,數字或比例>(左右分割框架)或
<frameset rows=數字或比例,數字或比例>(上下分割框架)

程式碼也可以寫成這樣 : 
<frameset cols=120,*>

用*的意思是左邊的頁面長度為120,而剩餘的空間都留給右邊的頁面顯示和使用。

在<frameset>之後還要加上<frame>的程式碼:
1、如果左邊頁面的顯示網頁為left.htm, 而右邊頁面顯示的網頁為right.htm,程式碼將如下所示 :

<frameset cols=120,*>
<frame src="left.htm">
<frame src="right.htm">
</frameset>

2、如果上邊頁面的顯示網頁為top.htm, 而下邊頁面顯示的網頁為foot.htm,程式碼將如下所示 : 
<frameset rows=30,*>
<frame src="top.htm">
<frame src="foot.htm">
</frameset>

■<frameset>標籤控制屬性如下 :

framespacing=控制兩個frame之間的距離; 
frameborder=控制frame外框的粗細; 
border=控制外框粗細,不外框便設成0 
要分割頁面的原始碼如下,不須加上<body>標籤 :

<html>
<head>
<title> 
我的網站
</title>
</head>
<frameset cols=200,* frameborder="0" framespacing="0" border="0">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
</html>

frame屬性

frame標籤的其它屬性如下:
<frame>是用來表述被分割的每一個小視窗的情況的,其主要屬性有:

src:指定每個frame連結檔案的路徑,即連結檔案所在的目錄。

marginwidth:設定檔案與左右邊框的距離。

marginheight:設定檔案與上下邊框的距離。

noresize:禁止瀏覽者改變frame的大小。

scrolling:設定滾動條是否顯示,一共有三個引數:yes(顯示)、no(不顯示)和auto(由瀏覽器自動判斷是否顯示滾動條),預設值是auto。

name:設定frame的名字。(可控制超連結出現位置)

<frame src="left.htm" name="left">
<frame src="right.htm" name="right">

比如我們想要在按下左邊頁面裡的的連結時,只改變右邊頁面的內容,則在在左邊頁面的連結目標裡要加上: 
<a href="http://bbs.cuiz.net" target="right">回論壇首頁</a>

請注意連結中target的定義為_parent,這屬於4個特殊的保留值。它們是: 
_parent:在當前FRAMESET位置顯示新href; 
_top:   在當前整個視窗位置顯示新href,比如本身FRAMESET位於另一個FRAMESET中; 
_self:  強制在當前FRAME中顯示新href; 
_blank: 在新視窗中顯示href;

這裡定義的是右邊框架內顯示。

下面是一個iframe標籤例項:

  <iframe name="exobud_mp" src="PlayerMP/exobud.html"
   width="640" height="25" marginwidth="0" marginheight="0"
   border="0" frameborder="0" scrolling="no"></iframe>

 ☆以上設定框架大小的數值僅供參考。一般來說,長條形狀的播放器會佔用面積大約為 640~760px(畫素) 的寬度乘以 20~25px(畫素) 的高度。
 (若使用字幕功能,需額外增加 60px 的高度)

☆☆☆☆下面給出幾個播放器加入頁面內的範例☆☆☆☆

  1、使用網頁框架 (frameset) 方式的嵌入法範例(上下型--播放器在下邊):

  <frameset rows="*,25" framespacing="0" border="0" frameborder="0">
    <frame name="index" src="http://bbs.cuiz.net" noresize>
    <frame name="exobudmp" src="PlayerMP/exobud.html" scrolling="no" noresize>
  </frameset>

  2、使用網頁框架 (frameset) 方式的嵌入法範例(上下型--播放器在上邊):

  <frameset rows="30,*" framespacing="0" border="0" frameborder="0">
    <frame name="exobudmp" src="PlayerMP/exobud.html" scrolling="no" noresize>
    <frame name="index" src="http://bbs.cuiz.net" noresize>
  </frameset>

  3、使用網頁框架 (frameset) 方式的嵌入法範例(左右型--播放器在左邊):

  <frameset cols="200,*" framespacing="0" border="0" frameborder="0">
    <frame name="exobudmp" src="PlayerMP/exobud.html" scrolling="no" noresize>
    <frame name="index" src="http://bbs.cuiz.net" noresize>
  </frameset>

☆☆進行播放器嵌入網站的動作時,請注意:

  1. 您必須瞭解HTML的框架語法如何應用,以及懂得利用純文字編輯器來設定框架
     語法。若您仍未掌握框架語法的寫法,請先在網路上搜索有關資料瞭解一下。

  2. 無論使用任何方式的語法 (包括Javascript等) 將播放器嵌入網站,您都必須
     確保當瀏覽者轉換網頁時,不會同時整理播放器所在的網頁,因而影響播放器
     的動作。

  3. 如果您不熟悉HTML語法,最好不要使用以內嵌框架 (iframe) 的方式將播放器
     嵌入網站,除非您已明白您的網站版面設計適合使用以此方式嵌入播放器。

  4. 以上說明使用框架 (frameset或iframe) 的方式將播放器嵌入網站,並不適用
     於以彈出式視窗 (Pop-up Window) 開啟的播放器。(以上說明參考部分繁體版說明)

原作者地址:http://www.jb51.net/article/77954.htm

      https://blog.csdn.net/justinok/article/details/8312