2. 程式人生 > >使用iframe的優缺點，為什麼少用iframe以及iframe和frame的區別。

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

阿新 • • 發佈：2019-01-16

注：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> <iframename="frame1"src="http://gongxquan.blog.163.com/test1.htm"/> <iframename="frame2"src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> </body>

  如下不能正常顯示：

<!--<body>--> <frameset> <iframename="frame1"src="http://gongxquan.blog.163.com/test1.htm"/> <iframename="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中均可正常

相關推薦

4、多用類型常量，少用#define預處理指令

報錯 作用域 生成 model 聲明 stat 指令 方法 類常量 摒棄： #define ANIMATION_DURATION 0.3 #define ERROR_MESSAGE @“ErrorMessage” 1）沒有常量的類型信息 2）假設此指令聲明在某個頭文件中

3、多用字面量語法，少用與之等價的方法

keys obj ble alloc ive 3.1 per 無法 bsp 1、字面字符串 摒棄： NSString *someString = [[NSString alloc] initWithString: @"Effective Objective-C 2.0"];

第41條:多用派發隊列，少用同步鎖

線程 ati 之前 lock col class logs pan 同步機制 　　本條要點：（作者總結） 　　 　　在 Objective-C 中，如果有多個線程要執行同一份代碼，那麽有時可能會出問題。這種情況下，通常要使用鎖來實現某種同步機制。在 GCD 出現之前，有

表達異常的分支時，少用 if-else 方式(可以使用衛語句、策略模式或者狀態模式來實現)

避免後續程式碼維護困難， if-else儘量不要超過3層， 可以嘗試使用衛語句、策略模式或者狀態模式 衛語句: 衛語句就是把複雜的條件表示式拆分成多個條件表示式，比如一個很複雜的表示式，嵌套了好幾層的i

3.多用字面量語法，少用與之等價的方法

使用字面量語法（literal syntax）可以縮減原始碼長度，使其更易讀。 字面數值 有時需要把整數、浮點數、布林值封入 OC 物件中，這種情況下可以用 NSNumber 類，該類可以處理多種型別的數值。 // 不用字面量，建立一個數字 NSNumber *someN

4.多用型別常量，少用#define預處理命令

#define ANIMATION_DURATION 0.3 缺點： 1）這樣定義沒有型別資訊，使閱讀程式碼的人難以理解其意圖。 2）假設此指令宣告在了某個標頭檔案中，那麼所有引入這個標頭檔案的程式碼，其ANIMATION_DURATION都會背替換為0.3。 更好的

CSS多個class樣式使用實踐－多用組合，少用繼承

先用繼承實現一個效果，程式碼如下：<style type="text/css">         .numberList1, .numberList2,  .numberList3, .numberList4{  border:1px solid #ccc;pa

java 為什麼說多用組合，少用繼承？

對類的功能的擴充套件，要多用組合，少用繼承。組合：新的類由現有物件所組成。繼承：按照現有類的型別來建立新類，無需改變現有類的形式，採用現有類的形式並在其中新增新程式碼。當繼承現有型別時，也就創造新的型別，這個新型別不僅包括現有型別的所有成員（儘管private成員被隱藏起來並

MyBatis排序時使用order by 動態引數時需要注意，用$而不是#, #{}和${}的區別以及order by注入問題

ORDER BY ${columnName}這裡MyBatis不會修改或轉義字串。重要：接受從使用者輸出的內容並提供給語句中不變的字串，這樣做是不安全的。這會導致潛在的SQL注入攻擊，因此你不應該允許使用者輸入這些欄位，或者通常自行轉義並檢查。 #{}相當於jdbc中的

掛多個css還是新建class-多用組合，少用繼承

轉載於http://blog.csdn.net/hacke2/article/details/21707133 5. CSS的聚合/組合原則--掛多個class還是新建 CSS裡也包含了設計模式的6大原則，今天講講聚合/組合原則--多用組合，少用繼承 假設有如圖3-

多用塊列舉，少用for迴圈

原文連結：http://www.jianshu.com/p/f76e8c62a755 著作權歸作者所有，轉載請聯絡作者獲得授權，並標註“簡書作者”。        注：本文來自《Effective Objective-C 2.0編寫高質量iOS 與 OS X程式碼的52個有

寫高質量OC程式碼52建議總結：48.多用塊列舉，少用for迴圈

以下是for迴圈針對NSArray，NSSet，NSDictionary的遍歷。字典和set都是無序的，無法根據特定的整數下標直接訪問其值。遍歷set和dictionary都需要而外建立陣列儲存物件和key。這個中介陣列增加了不必要的而外開支。 -(void)demofor

設計模式之多用組合，少用繼承

對類的功能的擴充套件，要多用組合，少用繼承。 對於類的擴充套件，在面向物件的程式設計過程中，我們首先想到的是類的繼承，由子類繼承父類，從而完成了對子類功能的擴充套件。但是，面向物件的原則告訴我們，對類的功能的擴充套件要多用組合，而少用繼承。其中的原因有以下幾點： 第一、子類

今天 1024，為了不 996，Lombok 用起來以及避坑指南

# Lombok簡介、使用、工作原理、優缺點 Lombok 專案是一個 Java 庫，它會自動插入編輯器和構建工具中，Lombok 提供了一組有用的註解，用來消除 Java 類中的大量樣板程式碼。 --- [TOC] --- # 簡介 **官方介紹** > > Project Lomb

samba共享目錄無法訪問的一般解決方案，非用戶登錄和讀寫權限問題

isa 用戶名 轉載 fedora 讀寫權限 sysconfig samba共享 path rc.d 配smb，被第四點坑了很久，特此轉載。 由於這5點都是比較普通的情況，不涉及用戶登錄和讀寫權限問題 1)關閉防火墻： #sevice iptables stop

函數的調用過程，棧幀的創建和銷毀。

永遠 rep 底部 pop mov call mage 繼續 TP 一.函數調用 1.函數調用過程涉及到的寄存器： （1）esp：棧指針寄存器(extended stack pointer)，其內存放著一個指針，該指針永遠指向系統棧最上面一個棧幀的棧頂。 （2）ebp：基址

C語言--函數的調用調用過程，棧幀的創建和銷毀。

調用函數 棧頂指針 第一個 可執行 創建 執行 過程 臨時變量 變量 函數在內存中到底是怎麽經過一系列過程調用的呢？ 指針寄存器esp,ebp1. 首先先搞清楚函數調用中兩個非常重要的指針寄存器esp,ebp。對這兩個寄存器的一些理解：esp為棧指針，用於指向棧的棧頂eb

算法：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。 隊列中的元素為int類型。《劍指offer》

pack 代碼 exception 隊列 imp scrip 入棧 return tro 算法：用兩個棧來實現一個隊列，完成隊列的Push和Pop操作。 隊列中的元素為int類型。《劍指offer》 利用棧來進行操作，代碼註釋寫的比較清楚：首先判斷兩個棧是否是空的：

Hibernate 版本問題，註解使用@Entity以及AnnotationConfiguration()方法過時問題。

將 Configuration cfg = new AnnotationConfiguration(); 改成 Configuration cfg = new Configuration(); 3.×的版本開始就是全面用Configutation替代了AnnotationConfig

Git 少用 Pull 多用 Fetch 和 Merge

本文有點長而且有點亂，但就像笑話裡說的那樣：我沒有時間讓它更短些。在Git的郵件列表裡有很多關於本文的討論，我會盡量把其中相關的觀點列在下面。 我最常說的關於git使用的一個經驗就是： 不要用git pull，用git fetch和git merge代替它。 git pull的問題是它把過程的細節都隱藏了起