相容各大瀏覽器的全網頁簡繁快速轉換語法

(Pic from: ibm.com, ibm.com)2014.12.11 公告：請改用目前最新的版本「讓網頁根據訪客語言設定, 自動轉換簡繁文字」。

雖然一些瀏覽器有簡繁轉換的外掛，但不是每個使用者都有裝，所以如果自己網站的訪客性質是簡體、繁體需求都有的話，那麼提供簡繁切換的功能會是比較友善的閱讀介面。然而，找了一些網路上流傳的簡繁轉換語法，沒有一個能做到相容於各大瀏覽器，有的 IE 下失效，有的 FireFox 下當掉，總之現存的語法沒有單一的完美解決方案，想要相容於各大瀏覽器，目前只能靠「Google 翻譯」。

先說結論好了，目前想了一個辦法，結合網路上各種語法的優點，整合成一個執行快速、安裝簡便、又相容於各大瀏覽器的套裝語法，這樣至少比「Google 翻譯」來得快又方便許多，以下為安裝方式：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WFU-ts-mix.js' type='text/javascript'></script><a href='javascript:;' onclick='this.innerHTML=(this.innerHTML=="切換為簡體")?"切换为繁体":"切換為簡體";TS_Switch();'>切換為簡體</a>
將以上的程式碼複製到任何想擺放簡繁切換按鈕的地方即可生效，安裝可說是非常非常的簡單，舉例來說，如果在 Blogger 隨便開一篇文章，把以上程式碼貼到文章裡面，存檔後在這篇文章的畫面就可以執行，效果就像下面這個按鈕：




不過這只是展示效果用，站長們可以到後台範本貼到任何想要擺放的位置；比較方便的作法還可以在側邊欄新增「HTML/JavaScript」小工具，把語法貼入即可；而最強悍的作法則是把語法貼到水平功能選單上──很奇特對不對？一般來說水平功能選單只能連結網址，還沒聽過可以執行語法的，不過這是真的可以的，請參考「密技！在 Blogger 水平功能選單（Menu Bar）使用語法產生按鈕效果」這篇文章的步驟，將以下語法貼到水平功能選單上：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WFU-ts-mix.js' type='text/javascript'></script><b onclick='this.innerHTML=(this.innerHTML=="切換為簡體")?"切换为繁体":"切換為簡體";TS_Switch();'>切換為簡體</b>
請小心貼到水平功能選單的語法不要複製前一段去了，這段語法與前面一段語法的差別只在於第一段語法使用<a>標籤，而這一段使用<b>標籤，因為在水平選單列上系統已經自動附加<a>標籤語法，所以不要再重複使用<a>標籤就可以了。如果順利的話，應該就可以看到切換按鈕出現在選單上，附上效果網頁供參考，「切換為簡體」按鈕就在選單上最右邊那一個：「示範網頁」

經測試後此套裝語法可以在 IE、FireFox、Chrome、Opera 這幾個主要瀏覽器執行無誤，所以這個套裝語法的確是執行速度快、安裝又簡便、並兼容於各大瀏覽器。好了，正文到此結束，如果有興趣瞭解更多的話，以下為簡繁轉換語法相關資料、參考資料來源及主程式碼出處：

◎ 「夢之緣免費交友中心網頁繁簡轉換程式」：此程式(連結已失效)聲稱相容於 FireFox，的確也是所有測試程式中唯一在各大瀏覽器都能成功執行的，可惜的是在 FireFox 下執行是個悲劇，轉換效果要出來至少得等十幾二十秒以上，看來是使用了 FireFox 難以執行的語法。而 WFU 發佈的套裝語法並未包含此程式，因為作者要求修改其語法的話必須通知他，所以就懶得對其下手了。


◎ 「網頁簡繁轉換書籤小工具」：這個網頁的書籤語法為消息來源網頁，但看 script 裡面 js 檔的網址卻是「新同文堂」，由於在新同文堂找不到發佈 js 檔的網頁，只好一併引用消息來源網頁。這個放在書籤的語法非常強悍，使用動態載入 script，所以雖然 js 檔較大，但完全不會佔用系統資源，因為使用者按下切換按鈕時系統才會去讀 js 檔；可惜缺點如下：

1. IE 無法執行
2. 只能放在書籤使用

WFU 未修改兩個原始 js 檔(一簡一繁)，只做了連結兩個原始檔的前導程式，讓兩個功能可以互相切換，這樣就可以在書籤以外的任何地方執行了；而 IE 無法執行的問題交給下一個程式。


◎ 「台灣PHP聯盟──透過javascript進行簡繁轉換」：這個網頁(連結已失效)介紹的語法最為短小精悍，所以執行速度最快，可惜缺點很多：

1. FireFox 無法執行且呈現當機狀態
2. 程式短表示字庫少 很多字無法轉換
3. 安裝 js 檔需擺放在特定位置 不方便

由於這個語法可以在 IE 下正常執行，剛好可填補新同文堂的不足，便拿來當候補用；WFU 修改其主程式，刪掉處理 cookie、一些架構，只留下處理簡繁轉換的部分；很重要的是幫其增加了字庫，字庫來源為：「使用Javascript直接將網頁進行簡繁轉換[轉]」；最後更改了安裝方式，跟新同文堂一樣採取動態載入，不佔用任何系統資源。

最終一共有四個主要的 js 檔：

統合前導程式：「WFU-ts-mix.js」──判斷瀏覽器後交由新同文堂或是候補程式動態執行
新同文堂繁轉簡：「tongwen-ts.js」
新同文堂簡轉繁：「tongwen-st.js」
候補程式：「StranJF_WFU.js」

最後如前所述，在想要放置簡繁切換按鈕的地方插入以下語法即可執行：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WFU-ts-mix.js' type='text/javascript'></script><a href='javascript:;' onclick='this.innerHTML=(this.innerHTML=="切換為簡體")?"切换为繁体":"切換為簡體";TS_Switch();'>切換為簡體</a>

2012.12.2 補充

如果把按鈕作成圖片的話，可使用以下的語法：

<script src='https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/WFU-ts-mix.js' type='text/javascript'></script><img src="填入圖片網址" title="簡繁切換" style="cursor: pointer;" onclick="TS_Switch();"/>
以上藍字請置換為圖片網址；綠字可改為自訂 title 文字；

其他網頁工具：