整站翻译

这可能是⽬前最⽅便的⽹站中英⽂切换（理论⽀持所有语⾔）

⼀、简述

公司最近做的⼀个官⽹项⽬，要求把页⾯成国际化，实现中英⽂切换，为此，我在⽹上找了⼀些中英⽂切换的解决⽅案，⼤概为如下两种：

1、使⽤⾕歌整站翻译Api

优点：只须调⽤接⼝，即可轻松完成整站翻译，翻译准确度还⾏。

缺点：需要梯⼦。

参考⽂章：

2、⾃⼰编写中英⽂对照表，⽤js控制

优点：⼀对⼀翻译，所以准确度最⾼。

缺点：需要编写⼤量中英⽂对照表，只适合于少量的固定翻译。

参考⽂章：

由于公司的要求是把整站进⾏翻译，且官⽹中存在新闻，即存在⼤量不可预料的数据，同时考虑到富⽂本数据不好翻译。所以，总的来说，

第⼀种⽅案最为合适，不过可惜，需要梯⼦，没办法，只能别寻出路。好在微软也有⼀个类似⾕歌整站翻译的Api：

其实，微软提供的Demo实现上也很简单，分如下⼏步：

1.引⼊TheTranslatorWebWidgetAPI

2.监听dom加载完毕，调⽤ate()整站翻译。

⼆、实现

1、封装

根据上⾯的对微软提供的Demo的研究，我们对此进⼀步封装，因为中英⽂切换⼀般都是⼀次点击后，往后的统⼀每个页⾯都需要或不需要

翻译，这就需要记录⼀个状态值，这⾥选⽤html5提供的storage来储存这个状态，并向外提供⼀个修改该状态并刷新页⾯的⽅法。故，该

js（）编写如下：

$(function(){

//dosomething

varscript=Element("script");

="text/javascript";

="/ajax/v3/?siteData=ueOIGRSKkd965FeEGM5JtQ**";

mentsByTagName('head')[0].appendChild(script);

varvalue=m("language");

ystatechange=function(){

if(tate=='complete'){

if(value==="1"){

ate('zh-CHS','en',onProgress,onError,onComplete,onRestoreOriginal,2000);

}

}

}

functiononProgress(value){

}

functiononError(error){

}

functiononComplete(){

$("#WidgetFloaterPanels").hide();

}

functiononRestoreOriginal(){

}

});

functiontranslate(){

varvalue=m("language");

if(value==="1"){

m("language","0");

}el{

m("language","1");

}

();//刷新当前页⾯.

}复制代码

2、编写测试页⾯

编写⼀个测试页⾯（）。要使⽤上⾯的，必须进⾏以下三步：

1.设置页⾯编码为utf-8

2.引⼊jquery和

3.设置按钮的点击事件，去调⽤中英⽂切换函数：translate();

中英⽂切换

你好