使用iframe的優缺點,為什么少用iframe以及iframe和frame的區別。


注:HTML5不再支持使用frame,iframe只有src 屬性

一、使用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中只能顯示出第一個;使用兩個以上的frame在IE和firefox中均可正常


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 iframe的優缺點? iframe的優缺點 iframe有那些優缺點? iframe 有哪些優缺點? iframe框架及優缺點 iframe的優缺點 frame與iframe的區別及基本用法 詳解iframe與frame的區別