iframe頁面字符編碼問題，頁面顯示空白

 

 

 

 

 

 

  

 

問題描述：

包含iframe的頁面打開後，引入的子頁面顯示空白，手動選擇子頁面編碼爲utf-8，頁面顯示正常，但有些頁面已經加入了

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

 

，問題依舊。

 

 

產生原因：

首先，我們應該知道utf-8用3個字節表示一個漢字，而普通的gb2312或big5使用2個字節。

其次，要知道瀏覽器是如何知道頁面應該用何種編碼進行解析的。

如下3種方式

1、HTTP Header中的”Content-Type”項
2、返回的html代碼開頭是否有BOM
3、html代碼中的meta標籤

最後，瀏覽器會按照上面3種方式確定頁面解析的編碼，瀏覽器(無論是IE還是Firefox，隨着瀏覽器的升級可能獲取編碼的方式有所不同)在解析頁面時，首先取HTTP Header中的Content-Type項，如果有寫明charset的話就認定頁面的編碼方式爲charset指定的值。如果沒有指明，則認定爲默認值（IE中文版的默認值是GB2312，Firefox中文版的默認值是GBK）。

然後，瀏覽器會看一下有沒有UTF-8 BOM(建議no bom的utf-8,因爲不同瀏覽器處理不同)，一旦發現有UTF-8的3字節BOM，則重新認定頁面的編碼方式爲UTF-8（所以當網頁保存爲utf -8編碼時，可以不在任何地方聲明網頁代碼內聲明編碼方式了）。然後是解碼階段，解碼完成後是解析html的階段。

解析html的過程中，當解析到head部分的meta標籤時，瀏覽器會根據<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />這個語句中的說明，重新認定編碼方式爲charset後面的方式，中斷html解析過程，返回到解碼步驟重新解碼。 

引用

正因爲這樣，當Title裏有奇數個全角字符時，IE把utf-8當作兩個字節解析時出現半個漢字的情況，這時該半個漢字會和</title>的<結合成一個亂碼字，導致IE無法讀完<title>部分，使整個頁面爲空白輸出。

 

解決方案：

實際上很簡單，把<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />放在<title></title>的前面即可。

 

參考文章：http://www.smuwcwt.com/archives/540

               http://www.cometruer.com/ 

 

 

大公司都是怎麼幹的：

Google:

<meta http-equiv=content-type content=”text/html; charset=UTF-8″>
<title>這裏是中文 – Google 搜索</title>

Yahoo:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>這裏是中文_雅虎網頁搜索</title>