One, a brief introduction

A recent official website project of the company requires internationalization of the page and the realization of switching between Chinese and English. For this reason, I have found some solutions for switching between Chinese and English on the Internet, which are roughly as follows:

1. Use Google’s Whole Site Translation Api

  • Advantages: just call the interface, you can easily complete the whole station translation, translation accuracy is good.
  • Cons: Requires a ladder.
  • Reference article: JS code to achieve website translation between Chinese and English

2, write their own Chinese and English comparison table, with JS control

  • Advantages: one-to-one translation, so the highest accuracy.
  • Disadvantages: need to write a large number of Chinese-English comparison tables, only suitable for a small number of fixed translation.
  • How to switch between Chinese and English on HTML page?

Because the company’s requirement is to translate the whole site, and there is news in the official website, that is, there is a lot of unpredictable data, and considering the rich text data is not easy to translate. So, on balance, the first option is the most suitable, but unfortunately, need a ladder, no way, but not to find a way out. Fortunately, Microsoft has an Api similar to Google’s whole Site Translate:

The Translator Web Widget API

In fact, The Demo provided by Microsoft is also very simple, divided into the following steps:

  1. Introduce The Translator Web Widget API
  2. Listening to the dom to load, call Microsoft. The Translator. Widget. The Translate () site translation.

Second, the implementation

1. Encapsulate language.js

According to the above research on the Demo provided by Microsoft, we further encapsulate this, because the Chinese and English switch is generally a click, the unification of each page in the future needs or does not need to be translated, which needs to record a state value, here select THE STORAGE provided by HTML5 to store this state, And provides a way out to modify the state and refresh the page. Therefore, the js (language.js) is written as follows:

$(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(); // Refresh the current page.Copy the code

2. Write test pages

Write a test page (test.html). To use language.js above, you must do the following three steps:

  1. Set the page encoding to UTF-8
  2. Introduce jquery and language.js
  3. Set the click event of the button to call the Translate () function.
<! 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 switch in both Chinese and English < / br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < div style ="text-align: center"</div> </body> <scripttype="text/javascript">
        $("#change").click(function(){
            translate();
        })
    </script>
    </html>Copy the code

Let’s try the effect, but I think it’s ok

Third, other

Language.js (zh-chs to En). If your project needs to convert to another language, you can customize language.js.