2013年11月12日

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

A+
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>

對 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 如何安裝兩個導覽列?」這兩篇文章。


更多實用工具:

4 則留言:

  1. 安裝新版本後不僅IE11也能正常使用,而且運行速度的確快了好多,感謝Wayne兄的極速回應!

    回覆刪除
  2. <2158249252768474678>(以上內容請勿刪除,從括號之後開始留言)不客氣,您也很快就把切換圖片的語法擺上去了!

    回覆刪除
  3. 不好意思,請問現在google Driver是正常的嗎O_O

    我連的是這支
    https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TongWen-WFU-min-131111.js

    回覆刪除
  4. <7863921575421305176>(以上內容請勿刪除,從括號之後開始留言)請見文章開頭的公告,Google Drive 今天的 js 外連全部故障了,請等幾天看看。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。