iframe页面字符编码问题，页面显示空白

 

 

 

 

 

 

  

 

问题描述：

包含iframe的页面打开后，引入的子页面显示空白，手动选择子页面编码为utf-8，页面显示正常，但有些页面已经加入了

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

 

，问题依旧。

 

 

产生原因：

首先，我们应该知道utf-8用3个字节表示一个汉字，而普通的gb2312或big5使用2个字节。

其次，要知道浏览器是如何知道页面应该用何种编码进行解析的。

最后，浏览器会按照上面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解析过程，返回到解码步骤重新解码。 

 

解决方案：

实际上很简单，把<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>

 

有必要严格按照标准来使用html,特别是团队协作时，这些东西都要事先约定好，免得有人犯错误，自己在此mark一下