
(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>
如果把按鈕作成圖片的話,可使用以下的語法:
<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 文字;
其他網頁工具:
我非常需要這個按鈕!!!(明天來研究一下.....)
回覆刪除THANK YOU~~~~~ <3
帥氣又有才的Wayne:
回覆刪除請問如果我想製作一個繁簡轉換的按鈕(圖片)。語法要怎麼寫??
新同文堂也是有可以用於IE的轉換工具,但版本至少須為IE9
回覆刪除http://tongwen.openfoundry.org/web.htm 只要把for web的版本拿來用就行了。
假如不需要詞彙表,可以只放單字部分
不過可以簡單自訂轉換詞庫,正是它優越的地方。
一般的轉換工具都寫得很死,要修改的話必須查到UTF8內碼,再去取代。
十分有用的工具哩,但在新出的IE11 好像用不了,是什麼原因呢?
回覆刪除<869605783970937231>(以上內容請勿刪除,從括號之後開始留言)謝謝你啊,我的網址是
回覆刪除http://chengtoby.blogspot.hk/
繁簡轉換在其他瀏覽器用沒問題,只在IE11用有問題,轉換不了繁簡之餘,還令其他小工具也壞掉。在你這篇blog文章使用繁簡轉換都一樣,按次轉換,那些廣告就會閃一閃
<6233932875665598296>(以上內容請勿刪除,從括號之後開始留言)感激 :)
回覆刪除<3960778253374376025>(以上內容請勿刪除,從括號之後開始留言)使用以上程式碼後,暫時測試過在Chrome和IE11都沒有問題了!期待Wayne兄的新文解說!
回覆刪除