一、简述
公司最近做的一个官网项目,要求把页面成国际化,实现中英文切换,为此,我在网上找了一些中英文切换的解决方案,大概为如下两种:
1、使用谷歌整站翻译Api
- 优点:只须调用接口,即可轻松完成整站翻译,翻译准确度还行。
- 缺点:需要梯子。
- 参考文章:js代码实现网站中英文相互翻译
2、自己编写中英文对照表,用js控制
- 优点:一对一翻译,所以准确度最高。
- 缺点:需要编写大量中英文对照表,只适合于少量的固定翻译。
- 参考文章:html页面如何实现中英文切换?
由于公司的要求是把整站进行翻译,且官网中存在新闻,即存在大量不可预料的数据,同时考虑到富文本数据不好翻译。所以,总的来说,第一种方案最为合适,不过可惜,需要梯子,没办法,只能别寻出路。好在微软也有一个类似谷歌整站翻译的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进行自定义扩展即可。
今天的文章这可能是目前最方便的网站中英文切换(理论支持所有语言)分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/21380.html