詳解iframe與frame的區別

時間 2019-12-15

標籤詳解 iframe frame 區別欄目 HTML 简体版

原文原文鏈接

iframe與frame的區別

1、使用iframe的優缺點

優勢:css

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

缺點：web

　　1.iframe有很差之處：樣式/腳本須要額外鏈入，會增長請求。另外用js防盜鏈只防得了小偷，防不了大盜。
　　2.iframe好在可以把原先的網頁所有原封不動顯示下來,可是若是用在首頁,是搜索引擎最討厭的.那麼你的網站即便作的在好,也排不到好的名次!若是是動態網頁，用include還好點！可是必需要去除他的<html><head><title><body>標籤！
　　3.框架結構有時會讓人感到迷惑，特別是在多個框架中都出現上下、左右滾動條的時候。這些滾動條除了會擠佔已經特別有限的頁面空間外，還會分散訪問者的留心力。訪問者遇到這種站點每每會馬上轉身離開。他們會想，既然你的主頁如此混亂，那麼站點的其餘部分也許更不值得閱讀。（這裏面本人的觀點就是子框架不要出現滾動條，窗口的滾動條只能有由主頁面來控制）
　　4.連接導航疑問。運用框架結構時，你必須保證正確配置全部的導航連接，如否則，會給訪問者帶來很大的麻煩。好比被連接的頁面出如今導航框架內，這種狀況下訪問者便被陷住了，由於此時他沒有其餘地點可去。
　　5.調用外部頁面,須要額外調用css,給頁面帶來額外的請求次數;瀏覽器

2、爲何少用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.惟一的鏈接池ui

　　瀏覽器只能開少許的鏈接到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。當確實須要時，謹慎的使用他們。

3、iframe和frame的區別

一、frame不能脫離frameSet單獨使用，iframe能夠；
二、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>

三、嵌套在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>-->

四、不嵌套在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>-->

五、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>

六、若是在同一個頁面使用了兩個以上的iframe，在IE中能夠正常顯示，在firefox中只能顯示出第一個(firefox已經改進，這個問題已經不存在了)；使用兩個以上的frame在IE和firefox中都可正常

小結：

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

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

1、<iframe>也應該是框架的一種形式，它與<frame>不一樣的是，iframe能夠嵌在網頁中的任意部分。咱們舉第一個例子，具體代碼如：
<iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>，這裏的URL能夠是相對路徑，也能夠是絕對路徑

width表示寬度，height表示高度，可根據實際狀況調整。
scrolling表示是否顯示頁面滾動條，可選的參數爲auto、yes、no，若是省略這個參數，則默認爲auto。

2、如何實現頁面上的超連接指向這個嵌入的網頁
只要給這個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>的代碼:
一、若是左邊頁面的顯示網頁爲left.htm，而右邊頁面顯示的網頁爲right.htm，代碼將以下所示 :

二、若是上邊頁面的顯示網頁爲top.htm，而下邊頁面顯示的網頁爲foot.htm，代碼將以下所示 :
<frameset rows=30,*>
<frame src="top.htm">
<frame src="foot.htm">
</frameset>

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

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

frame屬性

frame標籤的其它屬性以下：
<frame>是用來表述被分割的每個小窗口的狀況的，其主要屬性有：

src：指定每一個frame連接文件的路徑，即連接文件所在的目錄。

marginwidth：設置文件與左右邊框的距離。

marginheight：設置文件與上下邊框的距離。

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

scrolling：設置滾動條是否顯示，一共有三個參數：yes（顯示）、no（不顯示）和auto（由瀏覽器自動判斷是否顯示滾動條），缺省值是auto。

name：設置frame的名字。(可控制超連接出現位置)

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

請注意連接中target的定義爲_parent，這屬於4個特殊的保留值。它們是：
_parent：在當前FRAMESET位置顯示新href；
_top：在當前整個窗口位置顯示新href，好比自己FRAMESET位於另外一個FRAMESET中；
_self：強制在當前FRAME中顯示新href；
_blank：在新窗口中顯示href；

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