詳解iframe與frame的區(qū)別

看見就非常 2020-02-10

展開全文

iframe與frame的區(qū)別

一,、使用iframe的優(yōu)缺點

優(yōu)點:

　　1.程序調(diào)入靜態(tài)頁面比較方便;
　　2.頁面和程序分離;

缺點：

　　1.iframe有不好之處：樣式/腳本需要額外鏈入,，會增加請求,。另外用js防盜鏈只防得了小偷，防不了大盜,。
　　2.iframe好在能夠把原先的網(wǎng)頁全部原封不動顯示下來,但是如果用在首頁,是搜索引擎最討厭的.那么你的網(wǎng)站即使做的在好,也排不到好的名次!如果是動態(tài)網(wǎng)頁,，用include還好點！但是必須要去除他的<html><head><title><body>標(biāo)簽,！
　　3.框架結(jié)構(gòu)有時會讓人感到迷惑,，特別是在多個框架中都出現(xiàn)上下、左右滾動條的時候,。這些滾動條除了會擠占已經(jīng)特別有限的頁面空間外,，還會分散訪問者的留心力。訪問者遇到這種站點往往會立刻轉(zhuǎn)身離開,。他們會想,，既然你的主頁如此混亂，那么站點的其他部分也許更不值得閱讀,。（這里面本人的觀點就是子框架不要出現(xiàn)滾動條,，窗口的滾動條只能有由主頁面來控制）
　　4.鏈接導(dǎo)航疑問。運(yùn)用框架結(jié)構(gòu)時,，你必須保證正確配置所有的導(dǎo)航鏈接,，如不然，會給訪問者帶來很大的麻煩,。比如被鏈接的頁面出現(xiàn)在導(dǎo)航框架內(nèi),，這種情況下訪問者便被陷住了，因為此時他沒有其他地點可去,。
　　5.調(diào)用外部頁面,需要額外調(diào)用css,給頁面帶來額外的請求次數(shù);

二,、為什么少用iframe

　　iframes 提供了一個簡單的方式把一個網(wǎng)站的內(nèi)容嵌入到另一個網(wǎng)站中,。但我們需要慎重的使用iframe。iframe的創(chuàng)建比其它包括scripts和css的 DOM 元素的創(chuàng)建慢了 1-2 個數(shù)量級,。

　　使用 iframe 的頁面一般不會包含太多 iframe，所以創(chuàng)建 DOM 節(jié)點所花費(fèi)的時間不會占很大的比重,。但帶來一些其它的問題：onload 事件以及連接池(connection pool),。

1.Iframes 阻塞頁面加載

　　及時觸發(fā) window 的 onload 事件是非常重要的。onload 事件觸發(fā)使瀏覽器的 “忙” 指示器停止,，告訴用戶當(dāng)前網(wǎng)頁已經(jīng)加載完畢,。當(dāng) onload 事件加載延遲后，它給用戶的感覺就是這個網(wǎng)頁非常慢,。

　　window 的 onload 事件需要在所有 iframe 加載完畢后(包含里面的元素)才會觸發(fā),。在 Safari 和 Chrome 里，通過 JavaScript 動態(tài)設(shè)置 iframe 的 SRC 可以避免這種阻塞情況,。

2.唯一的連接池

　　瀏覽器只能開少量的連接到web服務(wù)器,。比較老的瀏覽器，包含 Internet Explorer 6 & 7 和 Firefox 2,，只能對一個域名(hostname)同時打開兩個連接,。這個數(shù)量的限制在新版本的瀏覽器中有所提高。Safari 3+ 和 Opera 9+ 可同時對一個域名打開 4 個連接,，Chrome 1+, IE 8 以及 Firefox 3 可以同時打開 6 個,。你可以通過這篇文章查看具體的數(shù)據(jù)表：Roundup on Parallel Connections.

　　有人可能希望 iframe 會有自己獨(dú)立的連接池，但不是這樣的,。絕大部分瀏覽器,，主頁面和其中的 iframe 是共享這些連接的。這意味著 iframe 在加載資源時可能用光了所有的可用連接,，從而阻塞了主頁面資源的加載,。如果 iframe 中的內(nèi)容比主頁面的內(nèi)容更重要，這當(dāng)然是很好的,。但通常情況下,，iframe 里的內(nèi)容是沒有主頁面的內(nèi)容重要的。這時 iframe 中用光了可用的連接就是不值得的了,。一種解決辦法是,，在主頁面上重要的元素加載完畢后，再動態(tài)設(shè)置 iframe 的 SRC,。

　　美國前 10 大網(wǎng)站都使用了 iframe,。大部分情況下，他們用它來加載廣告,。這是可以理解的,，也是一種符合邏輯的解決方案,，用一種簡單的辦法來加載廣告服務(wù)。但請記住,，iframe 會給你的頁面性能帶來沖擊,。只要可能，不要使用 iframe,。當(dāng)確實需要時,，謹(jǐn)慎的使用他們。

三,、iframe和frame的區(qū)別

1,、frame不能脫離frameSet單獨(dú)使用，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已經(jīng)改進(jìn)，這個問題已經(jīng)不存在了),；使用兩個以上的frame在IE和firefox中均可正常

小結(jié)：

Frame與Iframe兩者可以實現(xiàn)的功能基本相同,，不過Iframe比Frame具有更多的靈活性。 frame是整個頁面的框架,，iframe是內(nèi)嵌的網(wǎng)頁元素,，也可以說是內(nèi)嵌的框架 Iframe標(biāo)記又叫浮動幀標(biāo)記，可以用它將一個HTML文檔嵌入在一個HTML中顯示,。它和Frame標(biāo)記的最大區(qū)別是在網(wǎng)頁中嵌入的<Iframe></Iframe>所包含的內(nèi)容與整個頁面是一個整體,，而<Frame>< /Frame>所包含的內(nèi)容是一個獨(dú)立的個體，是可以獨(dú)立顯示的,。另外,，應(yīng)用Iframe還可以在同一個頁面中多次顯示同一內(nèi)容，而不必重復(fù)這段內(nèi) 容的代碼,。

◆◆下面簡要說明一下<iframe>標(biāo)簽的用法與屬性◆◆

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

width表示寬度,，height表示高度，可根據(jù)實際情況調(diào)整,。
scrolling表示是否顯示頁面滾動條，可選的參數(shù)為auto,、yes,、no，如果省略這個參數(shù),，則默認(rèn)為auto,。

二、如何實現(xiàn)頁面上的超鏈接指向這個嵌入的網(wǎng)頁
只要給這個iframe命名就可以了,。方法是<iframe name=**>,，例如我命名為player，寫入這句HTML語言< iframe width=640 height=25 name=player frameborder=0 src=http://www./player.htm> </iframe>,，
然后,，網(wǎng)頁上的超鏈接語句應(yīng)該寫為：<a href=URL target=cuiz>打開播放器</a>

Frameset屬性

首先我們了解下一 Frameset標(biāo)簽的相關(guān)屬性:

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

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

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

在<frameset>之后還要加上<frame>的代碼:
1,、如果左邊頁面的顯示網(wǎng)頁為left.htm，而右邊頁面顯示的網(wǎng)頁為right.htm,，代碼將如下所示 :

2,、如果上邊頁面的顯示網(wǎng)頁為top.htm，而下邊頁面顯示的網(wǎng)頁為foot.htm,，代碼將如下所示 :
<frameset rows=30,*>
<frame src="top.htm">
<frame src="foot.htm">
</frameset>

■<frameset>標(biāo)簽控制屬性如下 :

framespacing=控制兩個frame之間的距離,；
frameborder=控制frame外框的粗細(xì)；
border=控制外框粗細(xì),，不外框便設(shè)成0
要分割頁面的原始碼如下,，不須加上<body>標(biāo)簽 :

frame屬性

frame標(biāo)簽的其它屬性如下：
<frame>是用來表述被分割的每一個小窗口的情況的，其主要屬性有：

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

marginwidth：設(shè)置文件與左右邊框的距離。

marginheight：設(shè)置文件與上下邊框的距離,。

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

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

name：設(shè)置frame的名字。(可控制超鏈接出現(xiàn)位置)

比如我們想要在按下左邊頁面里的的鏈接時,，只改變右邊頁面的內(nèi)容,，則在在左邊頁面的鏈接目標(biāo)里要加上:
<a href="http://bbs." target="right">回論壇首頁</a>

請注意鏈接中target的定義為_parent，這屬于4個特殊的保留值,。它們是：
_parent：在當(dāng)前FRAMESET位置顯示新href,；
_top：在當(dāng)前整個窗口位置顯示新href，比如本身FRAMESET位于另一個FRAMESET中,；
_self：強(qiáng)制在當(dāng)前FRAME中顯示新href,；
_blank：在新窗口中顯示href；

這里定義的是右邊框架內(nèi)顯示,。

下面是一個iframe標(biāo)簽實例：

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

☆☆☆☆下面給出幾個播放器加入頁面內(nèi)的范例☆☆☆☆

1、使用網(wǎng)頁框架 (frameset) 方式的嵌入法范例(上下型--播放器在下邊)：

2,、使用網(wǎng)頁框架 (frameset) 方式的嵌入法范例(上下型--播放器在上邊)：

3,、使用網(wǎng)頁框架 (frameset) 方式的嵌入法范例(左右型--播放器在左邊)：

☆☆進(jìn)行播放器嵌入網(wǎng)站的動作時，請注意：

1. 您必須了解HTML的框架語法如何應(yīng)用,，以及懂得利用純文本編輯器來設(shè)定框架
語法,。若您仍未掌握框架語法的寫法，請先在網(wǎng)路上搜索有關(guān)資料了解一下,。

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

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

4. 以上說明使用框架 (frameset或iframe) 的方式將播放器嵌入網(wǎng)站，并不適用
于以彈出式窗口 (Pop-up Window) 打開的播放器,。(以上說明參考部分繁體版說明)

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

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

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點擊一鍵舉報,。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：看見就非常 > 《待分類》

舉報/認(rèn)領(lǐng)