The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

關於各瀏覽器對網頁與文字編碼的處理規則研究整理

📅 2009/09/12 19:46 📁 Web, .NET Framework, ASP.NET, Tips

文字編碼 (Text Encoding) 是一個頗為複雜的議題，現在的開發人員很幸福，只要遇到不懂的編碼問題就用 UTF-8 編碼解決，想當初我在開發多奇中文繁簡轉換大師產品時遇到的編碼問題百百種，可說是養成了對於文字編碼的敏感度，之後遇到編碼問題就比較容易能理解與解決問題，今天我來分享「各瀏覽器」對於文字編碼的處理細節，由於這些資訊在網路上又多又雜，似乎不易整理，以下部分內容是我親自實驗並研究出來的心得，如有謬誤之處敬請告知。

瀏覽器對 "網址列" (Address bar) 的編碼處理

請先閱讀 講解 URL 結構與分享幾個相對路徑與絕對路徑的開發技巧 文章瞭解網址結構，如下圖：

網址結構

1. 當在 “網址列” 直接手動輸入含有「中文」的網址時

  • path 部分預設會以 UTF-8 編碼送出!
    • Internet Explorer、Firefox、Google Chrome 行為皆如此
  • query 部分一律會以 系統區域 (System locale) 設定為主
    • 若為 "繁體中文(台灣)" 就會自動以 Big5 碼送出文字!
    • 若為 "簡體中文(中國)" 就會自動以 GB2312 碼送出文字!
    • 此規則只有 Google Chrome 為例外，Google Chrome 會一律用 UTF-8 編碼送出文字。

補充說明

  • 在 [網際網路選項] 的 [進階] 頁籤中有個 [永遠將 URL 傳送成 UTF-8] 選項，預設為勾選的狀態。如果你 [取消勾選] 這個選項，在 path 部分就會改以 System locale (系統區域) 指定的字集編碼送出。 ( 如下圖示 )
    在 [網際網路選項] 的 [進階] 頁籤中有個 [永遠將 URL 傳送成 UTF-8] 選項
  • 若要變更系統區域設定，可從 [控制台] 的 [地區及語言選項] 修改，請參考下圖:
    [控制台] 的 [地區及語言選項]

    Region and Language

2. 從網頁「點擊」超連結(Hyperlink)且連結中包含「中文」時

  • path 部分預設會以 UTF-8 編碼送出!
    • Internet Explorer、Firefox、Google Chrome 行為皆如此
  • query 部分當「沒有利用 UrlEncode 編碼」時，一律會以「該網頁的編碼」為主送出文字。
    • 若你現在讀取的是 Big5 編碼的網頁，在點擊連結時就會自動以 Big5 編碼送出文字
    • 若你現在讀取的是 GB2312 編碼的網頁，在點擊連結時就會自動以 GB2312 編碼送出文字
    • 若你現在讀取的是 UTF-8 編碼的網頁，在點擊連結時就會自動以 UTF-8 編碼送出文字

補充說明

  • 經測試，若透過 JavaScript 進行轉址 ( location.href ) 時，瀏覽器對文字編碼的行為與透過超連結點擊的行為一模一樣。
  • 當你需要跨字集連結網頁時，務必採用 UrlEncode 對參數進行編碼！
    • 例如：從 UTF-8 編碼的網頁設定連結到 Big5 編碼的網頁，如果網址的 QueryString 包含中文字時，請務必記得要將參數 ( Key & Value ) 進行 UrlEncode 編碼。

 

瀏覽器對 "網頁文字" 的編碼處理

對於文字編碼沒有感覺的網頁開發人員一般來說都不會在 HTTP Header 的地方明確指定網頁字集，雖然瀏覽器一般來說都具備自動判斷網頁字集的能力，但也不是每次都會判斷正確，最好的網站建置還是明確指定編碼字集來的好。

1. 在伺服器回應網頁要求時告知瀏覽器應顯示的字集

最簡單的作法就是明確指定 Content-Type 這個HTTP Header，這時瀏覽器就會依照指定的字集 (Charset) 顯示網頁文字，如下程式範例。

ASP.NET

<%@ Page Language="C#" ResponseEncoding="BIG5" %>

ASP.NET ( Code Behind 或 HTTP Handler ) / C#

Response.Charset = "big5";

ASP

<% Response.CharSet = "big5" %>

PHP

<?php header("Content-Type”, "text/html; charset=big5" ?>

Perl

print "Content-type: text/html; charset=big5\n\n";

2. 在網頁 HTML 中加入 META 標籤，明確指定 Content-Type 與字集

這是在當你無法控制伺服器指定字集時才會使用這個 meta 標籤進行宣告，另一個使用情境會在下一段落 [瀏覽器對 "表單內容送出" 的編碼處理] 用到。設定範例如下：

<meta http-equiv="Content-Type" content="text/html; charset=big5" />

注意事項：這個 meta 標籤一定要放在 <head> 標籤中，而且一定要在 <body> 標籤之前出現。

 

瀏覽器對 "表單內容送出" 的編碼處理

由於 Windows 作業系統核心都是以 Unicode 字集處理，所以你所在螢幕上看到的文字基本上都一定是先透過 Unicode 處理過才顯示出來的，所以當你打算從網頁中送出表單時，你在表單中輸入的所有文字會依照你「網頁編碼」的定義先進行轉碼動作。

例如你的網頁是以 Big5 進行編碼，網頁表單要送出的文字就會嘗試從 Unicode 轉換成 Big5 編碼，至於無法轉換成 Big5 編碼的文字全部都會以 HTML Entities 語法表示 ( 例如: &#26356; )。

當你的網頁編碼為 Big5 字集，但你需要表單送出時用 GB2312 字集送出的話，就可以利用以下步驟完成此任務：

1. 伺服器回應網頁要求時明確指定瀏覽器應顯示的字集

Response.ContentType = "text/html; charset=big5";

2. 在網頁 HTML 中加入 META 標籤，明確指定 Content-Type 與字集

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

額外補充說明請參考我另一篇文章：一個常用又不知道是做什麼用的 META 設定

※ 2009/9/14 更新

網友 chihwen 提供了一條關於 瀏覽器對 "表單內容送出" 的編碼處理 的線索，經我詳細測試下發現各瀏覽器之間的確還是有不同的處理規則，我補充說明於另一篇文章: 關於各瀏覽器對【表單內容送出】的編碼處理補充說明。

相關連結

留言評論