2012年4月17日

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

A+

(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 文字;



其他網頁工具:

13 則留言:

  1. 我非常需要這個按鈕!!!(明天來研究一下.....)
    THANK YOU~~~~~ <3

    回覆刪除
  2. <8290761518433047859>(以上內容請勿刪除,從括號之後開始留言)
    >////<

    回覆刪除
  3. 帥氣又有才的Wayne:

    請問如果我想製作一個繁簡轉換的按鈕(圖片)。語法要怎麼寫??

    回覆刪除
  4. <5643206345558239040>(以上內容請勿刪除,從括號之後開始留言)唉呀小妹的嘴真甜,自己人問問題不用這麼見外~~我先假設妳只要一張圖片(沒有切換圖片的效果),語法我放在文末「2012.12.2 補充」的區塊,試試看吧!

    回覆刪除
  5. 新同文堂也是有可以用於IE的轉換工具,但版本至少須為IE9
    http://tongwen.openfoundry.org/web.htm 只要把for web的版本拿來用就行了。

    假如不需要詞彙表,可以只放單字部分
    不過可以簡單自訂轉換詞庫,正是它優越的地方。
    一般的轉換工具都寫得很死,要修改的話必須查到UTF8內碼,再去取代。

    回覆刪除
  6. 十分有用的工具哩,但在新出的IE11 好像用不了,是什麼原因呢?

    回覆刪除
  7. <7260736396325751507>(以上內容請勿刪除,從括號之後開始留言)你可以留個網址來測試看看

    回覆刪除
  8. <869605783970937231>(以上內容請勿刪除,從括號之後開始留言)謝謝你啊,我的網址是
    http://chengtoby.blogspot.hk/
    繁簡轉換在其他瀏覽器用沒問題,只在IE11用有問題,轉換不了繁簡之餘,還令其他小工具也壞掉。在你這篇blog文章使用繁簡轉換都一樣,按次轉換,那些廣告就會閃一閃

    回覆刪除
  9. <1230547659499464687>(以上內容請勿刪除,從括號之後開始留言)你的網站做得很不錯啊~有空歡迎來「Blogger中文社群」逛逛~

    如果會讓其他小工具壞掉的話,建議先不要用 IE11 好了(例如用Chrome、Opera、FF),畢竟 IE11 使用者比例目前極低,對網站應該影響不大。

    我會找時間更新程式碼,也許 IE11 引擎更新了,導致對 js 的解讀不一樣,OK 的話會通知你。

    回覆刪除
  10. <6233932875665598296>(以上內容請勿刪除,從括號之後開始留言)感激 :)

    回覆刪除
  11. <7544118234371722627>(以上內容請勿刪除,從括號之後開始留言)請隨意找個地方安裝以下的程式碼:

    <script>
    var TongWenWFU = {};
    TongWenWFU.setting = 1;
    (function () {
    var url = "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/TongWen-WFU-min-131111.js",
    script = document.createElement("script");
    script.src = url;
    document.documentElement.firstChild.appendChild(script);
    } )();
    </script>
    <div onclick="TongWenWFU.toggle()" style="cursor: pointer">簡繁切換</div>

    如果IE11沒問題的話請告知,我再來發新文章!

    回覆刪除
  12. <3960778253374376025>(以上內容請勿刪除,從括號之後開始留言)使用以上程式碼後,暫時測試過在Chrome和IE11都沒有問題了!期待Wayne兄的新文解說!

    回覆刪除
  13. <5861892176285665534>(以上內容請勿刪除,從括號之後開始留言)謝謝測試!新版已經發文了:http://wayne-fu.blogspot.tw/2013/11/traditional-simplified-chinese-switch-cross-browswers.html

    回覆刪除

張貼留言注意事項:

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