讓網頁根據訪客語言設定, 自動轉換簡繁文字 (切換按鈕升級版)

上一個版本「相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版」FB 留言 Herman Tsao 詢問「能做成依瀏覽器語言做自動轉換嗎?」，其實偵測訪客的瀏覽器語言設定是做得到的，我們應該有這樣的經驗，某些安裝 Google 翻譯的網站，能得知我們的預設語言，在畫面上自動顯示 "是否翻譯為 xxx 語言" 這類訊息。藉由這樣的偵測功能，就完成了本文的這個小工具升級版。

那麼讀者的問題或許會是：「那還需要這個小工具嗎，使用 Google 翻譯不就好了？」的確如此，不過 Google 翻譯用久了，就會發現以下不方便之處：

• 畫面上方會被 Google 翻譯強制佔用一定的高度，而破壞版面
• Google 翻譯耗費的時間還滿久的

因此，如果只需要簡繁自動轉換(或切換)的話，這個小工具的切換速度可用 "光速" 來形容，比 Google 翻譯強太多了。以下先說明原理，想直接安裝請跳至「二、安裝程式碼」。

一、運作原理

1. js 偵測語言設定

原本認為用 js 偵測語言設定不難，搞定跨瀏覽器的語法設定就行了，例如以下程式碼：

var language = window.navigator.userLanguage || window.navigator.language;

2. 藉助伺服器端

深入瞭解後知道這不是最佳解，在這個 Stack Overflow 討論串「JavaScript for detecting browser language preference」，以上的程式碼只排第二名，原來每個瀏覽器的設計方式不一，用 js 所取得的語言設定，可能只是部分瀏覽器的系統設定值。若使用者變更了偏好的語言設定，js 並不一定能取得改變後的參數。

因此最謹慎的作法，是由 http request 的訊息之中，擷取有關語言設定的字串。但這件事使用純粹前端的 js 做不到，必須藉助第三方伺服器的輔助才行，而衍生的問題就是，使用外部伺服器的服務，必須面臨會有不穩、或流量限制的風險。


3. 解決方案

最終 WFU 採取「2. 藉助伺服器端」為主，當偵測到伺服器暫時失效時，使用「1. js 偵測語言設定」為輔，算是最佳的折衷方式。


4. 簡繁切換原理

如果需要瞭解為何這個小工具能夠快速的進行簡繁切換，請參考「相容各大瀏覽器的全網頁簡繁快速轉換語法」、「更新版」的說明。

二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

如安裝過舊版本，請先移除原本的程式碼。接著請到後台「範本」→「編輯 HTML」，游標點進範本區塊，再搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

以下參數修改請參照以上程式碼行號：

D：這個參數跟舊版本的意義不同，這個新版本由於會自動偵測語言設定，此處的參數只會作用在訪客預設語言 "非繁體、非簡體" 的狀況。例如一個住在美國的華人訪客，預設語言可能是英文，那麼這裡設定的參數可讓他的網頁文字以繁體或簡體顯示。

H：由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後，置換本行的綠色網址字串。

三、切換按鈕

安裝本文的新版小工具後，基本上就不太需要切換按鈕了。不過如果仍然想在網頁上提供訪客簡繁切換按鈕的話，一樣可按照「上一版」→「三、安裝文字按鈕」或「四、安裝圖片按鈕」的步驟來進行即可，可前往以下網頁看效果：

點此看範例網頁

更多實用工具：

• 本站使用的 Blogger hack 及工具整理