這可能是目前最方便的網站中英文切換（理論支援所有語言）

阿新 • • 發佈：2019-01-13

一、簡述

公司最近做的一個官網專案，要求把頁面成國際化，實現中英文切換，為此，我在網上找了一些中英文切換的解決方案，大概為如下兩種：

1、使用谷歌整站翻譯Api

優點：只須呼叫介面，即可輕鬆完成整站翻譯，翻譯準確度還行。
缺點：需要梯子。

2、自己編寫中英文對照表，用js控制

優點：一對一翻譯，所以準確度最高。
缺點：需要編寫大量中英文對照表，只適合於少量的固定翻譯。

由於公司的要求是把整站進行翻譯，且官網中存在新聞，即存在大量不可預料的資料，同時考慮到富文字資料不好翻譯。所以，總的來說，第一種方案最為合適，不過可惜，需要梯子，沒辦法，只能別尋出路。好在微軟也有一個類似谷歌整站翻譯的Api：

其實，微軟提供的Demo實現上也很簡單，分如下幾步：

引入The Translator Web Widget API
監聽dom載入完畢，呼叫Microsoft.Translator.Widget.Translate()整站翻譯。

二、實現

1、封裝language.js

根據上面的對微軟提供的Demo的研究，我們對此進一步封裝，因為中英文切換一般都是一次點選後，往後的統一每個頁面都需要或不需要翻譯，這就需要記錄一個狀態值，這裡選用html5提供的storage來儲存這個狀態，並向外提供一個修改該狀態並重新整理頁面的方法。故，該js（language.js）編寫如下：

$(function(){ 
      // do something 
    var script=document.createElement("script");  
    script.type="text/javascript";  
    script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";  
    document.getElementsByTagName('head')[0].appendChild(script);  


    var value = sessionStorage.getItem("language");
    document.onreadystatechange = function () {
        if (document.readyState == 'complete') {
            if(value==="1"){
                Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
            }
        }
    }
    function onProgress(value) {
    }
    function onError(error) {
    }
    function onComplete() {
        $("#WidgetFloaterPanels").hide();
    }
    function onRestoreOriginal() { 
    }
});

function translate(){
    var value = sessionStorage.getItem("language");
    if(value==="1"){
        sessionStorage.setItem("language", "0"); 
    }else{
        sessionStorage.setItem("language", "1");
    }
    window.location.reload();//重新整理當前頁面.
}

2、編寫測試頁面

編寫一個測試頁面（test.html）。要使用上面的language.js，必須進行以下三步：

設定頁面編碼為utf-8
引入jquery和language.js
設定按鈕的點選事件，去呼叫中英文切換函式：translate();

    <!DOCTYPE html>
    <head>
        <title>Microsoft Widget API Sample</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="language.js"></script>
    </head>
    <body>
        <button id="change">中英文切換</button
        </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
        <div style="text-align: center" >
            你好
        </div>
    </body>
    <script type="text/javascript">
        $("#change").click(function(){
            translate();
        })
    </script>
    </html>

試試看效果吧，反正我覺得還行~

三、其他

上面編寫的language.js中寫死了中文轉英文（zh-CHS轉en），如果專案需要其他語言的轉換，對language.js進行自定義擴充套件即可。

這可能是目前最方便的網站中英文切換（理論支援所有語言）

一、簡述

1、使用谷歌整站翻譯Api

2、自己編寫中英文對照表，用js控制

二、實現

1、封裝language.js

2、編寫測試頁面

三、其他

這可能是目前最方便的網站中英文切換（理論支援所有語言）

這可能是最全的Android:Process （程序）講解了

只包含中英文的UTF-8與Unicode的轉換（不支援其它語言）

這可能是最簡明扼要的 js事件冒泡機制+阻止默認事件講解了

這可能是最好玩的python GUI入門例項!

rabbitmq2-這可能是最全的rabbitmq概覽了

這可能是最全面的CSS基礎佈局文章

[Android開源]：EasyGuideLayer: 這可能是最簡單、靈活、強大的頁面蒙層元件了！

這可能是最早的RxDart使用入門教程。。。

這可能是最直接的Android動態申請許可權程式碼

這可能是最囉嗦的Python爬蟲入門教程了 5-100

這可能是最囉嗦的Python爬蟲入門教程了 6-100

這可能是最囉嗦的Python爬蟲入門教程了 8-100

這可能是最透徹的氣泡排序演算法解析（java實現）

這可能是最簡單的Page Object庫

這可能是最全的Redis叢集方案介紹了

這可能是最詳細的目標檢測YOLO_v1的解釋

這可能是最詳細的Python檔案操作

這可能是最精簡的Android6.0執行時許可權處理，70行程式碼的工具類。附:各種許可權詳細處理

web,jsp,html網站中英文切換，資源國際化解決方案及程式碼（其中包含動態切換資料來源及URL攔截器）.

這可能是目前最方便的網站中英文切換（理論支援所有語言）

一、簡述

1、使用谷歌整站翻譯Api

2、自己編寫中英文對照表，用js控制

二、實現

1、封裝language.js

2、編寫測試頁面

三、其他

相關推薦