这可能是目前最方便的网站中英文切换（理论支持所有语言）

欢迎关注微信公众号：[FSA全栈行动 👋]

# 一、简述

公司最近做的一个官网项目，要求把页面成国际化，实现中英文切换，为此，我在网上找了一些中英文切换的解决方案，大概为如下两种：

# 1、使用谷歌整站翻译Api

优点：只须调用接口，即可轻松完成整站翻译，翻译准确度还行。
缺点：需要梯子。
参考文章：js代码实现网站中英文相互翻译 (opens new window)

# 2、自己编写中英文对照表，用js控制

优点：一对一翻译，所以准确度最高。
缺点：需要编写大量中英文对照表，只适合于少量的固定翻译。
参考文章：html页面如何实现中英文切换？ (opens new window)

由于公司的要求是把整站进行翻译，且官网中存在新闻，即存在大量不可预料的数据，同时考虑到富文本数据不好翻译。所以，总的来说，第一种方案最为合适，不过可惜，需要梯子，没办法，只能别寻出路。好在微软也有一个类似谷歌整站翻译的Api：

The Translator Web Widget API (opens new window)

其实，微软提供的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进行自定义扩展即可。

#language #中英文切换

uniapp - 腾讯云点播小程序插件→