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>