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

更新時(shí)間：2016年01月13日 09:40:18 作者：chua1989

Frame與Iframe兩者可以實(shí)現(xiàn)的功能基本相同，不過Iframe比Frame具有更多的靈活性，通過本文給大家詳解細(xì)節(jié)iframe與frame的區(qū)別，對(duì)iframe與frame的區(qū)別相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

開門見山了，大家需要注意的地方：HTML5不再支持使用frame，iframe只有src 屬性

一、使用iframe的優(yōu)缺點(diǎn)

優(yōu)點(diǎn):

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

缺點(diǎn)：

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

二、為什么少用iframe

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

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

1.Iframes 阻塞頁(yè)面加載

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

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

2.唯一的連接池

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

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

　　美國(guó)前 10 大網(wǎng)站都使用了 iframe。大部分情況下，他們用它來加載廣告。這是可以理解的，也是一種符合邏輯的解決方案，用一種簡(jiǎn)單的辦法來加載廣告服務(wù)。但請(qǐng)記住，iframe 會(huì)給你的頁(yè)面性能帶來沖擊。只要可能，不要使用 iframe。當(dāng)確實(shí)需要時(shí)，謹(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、如果在同一個(gè)頁(yè)面使用了兩個(gè)以上的iframe，在IE中可以正常顯示，在firefox中只能顯示出第一個(gè)(firefox已經(jīng)改進(jìn)，這個(gè)問題已經(jīng)不存在了)；使用兩個(gè)以上的frame在IE和firefox中均可正常

小結(jié)：

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

您可能感興趣的文章: