[小工具]相容各大瀏覽器的全網頁簡繁快速轉換語法__更新版

2014.12.11 公告：也可使用目前最新的版本「讓網頁根據訪客語言設定, 自動轉換簡繁文字」。

「舊版的簡繁轉換語法」 於留言 #5 Toby Cheng 表示：「只在IE11用有問題，轉換不了繁簡之餘，還令其他小工具也壞掉。在你這篇blog文章使用繁簡轉換都一樣，按次轉換，那些廣告就會閃一閃」。沒想到最近 IE 才剛釋出最新版 11，就衍生了新的問題，有必要來祈禱一下本站寫的其他小工具，不要也受到 IE 的波及。

不過還是很感謝 Toby 的回報，既然要解決 IE11 下的異常狀況，乾脆把程式碼整個重新檢討一下。由於一年半前的 js 功力不足，一個小工具分成四個 js 檔，還真是有點汗顏。整理一陣之後，將檔案縮到最精簡，執行速度也飛快，當然也必須相容於各大瀏覽器。以下先大致說明原理，想直接安裝請跳「二、安裝程式碼」。

點此看範例網頁

一、更新版的原理

IE 算是滿麻煩的瀏覽器，曾寫了一篇「建議避免使用 IE8(含)以下瀏覽器」。簡繁切換舊版的實力不足，為了舊 IE 而使用了額外的 js 檔，只是沒想到這次 IE11 還是會令人頭痛。

本篇的更新版去除了不必要的 js 檔，只抽取「同文堂(連結已失效)」這個網頁其中兩個 js 檔裡面的簡、繁字庫來使用：tongwen_table_s2t.js、tongwen_table_t2s.js。

舊的 js 語法裡面有一段使用了 innerHTML 來修改簡、繁文字，但網頁的 innerHTML 重繪會有兩個缺點：

1. 可能造成動態產生的小工具異常
2. IE 下某些元素不接受 innerHTML 重寫。

更新版使用不同解決方式，先抓取頁面所有的文字節點，再對文字節點的 nodeValue 進行簡繁置換，不但小工具不會重繪，而且此簡單的語法所有瀏覽器都能正常運作。

二、安裝程式碼

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

如果曾安裝過舊版，那麼舊版程式碼可全部移除。接著請到後台「範本」→「編輯 HTML」，搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：

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

D：如果網頁預設字體是簡體的話，請改為 0。

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

安裝完以上程式碼後，簡繁切換的按鈕，想以什麼樣的形式呈現，例如文字、標題、放在導覽列等，請依照以下標題的內容進行安裝。

三、安裝文字按鈕

<span onclick="TongWenWFU.toggle()" style="cursor: pointer">簡繁切換</span>

• 將以上的程式碼貼到網頁中任何想顯示的位置即可
• 如果是 Blogger，可在側邊欄新增「HTML/JavaScript」小工具，把語法貼入即可。
• 如不清楚要放在 Blogger 範本中什麼位置，可參考「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」、「Blogger 範本__(三)文章及留言區塊的程式碼」系列文。

對 HTML/CSS 熟悉的話，以上程式碼的字串、樣式請自行修改。

四、安裝圖片按鈕

<span onclick="TongWenWFU.toggle()" style="cursor: pointer" title="簡繁切換"><img class="post-img" src="http://3.bp.blogspot.com/-Za82UTx7x2s/UoDK7sYOnXI/AAAAAAAAIFs/HMSRB0CYEHA/s1600/translate.png"/></span>

• 以上藍字的圖片網址請置換為自己的圖片網址
• 綠字的提示字串可改為自訂字串
• 將程式碼貼到網頁中任何想顯示的位置即可

範例網頁的按鈕可測試效果：

點此看範例網頁

五、安裝在導覽列

如果想要像舊版將簡繁切換按鈕放在 Blogger 的水平導覽列，請參考「密技！在 Blogger 水平功能選單使用語法產生動態效果」 → 「一、使用方式」的步驟，將輸入的程式碼改為以下即可：

<b onclick="TongWenWFU.toggle()">簡繁切換</b>
想看效果網頁可參考本站的分站「三國志11」→ 最上方的那個導覽列的「簡繁切換」選項

至於為何分站有兩個導覽列，有興趣同樣製作兩個導覽列的話，可參考「將 Blogger "標籤" 小工具放在導覽列實作」、「Blogger 如何安裝兩個導覽列？」這兩篇文章。


更多實用工具：

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