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

GitLqr發表於2017-09-19
網站

一、簡述

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

1、使用谷歌整站翻譯Api

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

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

The Translator Web Widget API

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

  1. 引入The Translator Web Widget API
  2. 監聽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，必須進行以下三步：

  1. 設定頁面編碼為utf-8
  2. 引入jquery和language.js
  3. 設定按鈕的點選事件，去呼叫中英文切換函式：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進行自定義擴充套件即可。

相關文章