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

调用微软页面翻译API ： The Translator Web Widget 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进行自定义扩展即可。

via：error.work

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

jq 中英文切换_如何用js实现网站中英文切换？HTML中想把一段js语言转换为jq语言？...
相关问题 vartb=$("");$.each(json,function(index,ele){vartr=$("tr");$.each(ele,functi ...
laravel配置语言包，实现网站中英文切换
一.laravel语言包的配置,在resources/lang/en,这是默认的语言,自己添加一个zh文件夹,在下面创建需要切换的语言页面,如 zh/header.php <?php retur ...
.net 网站中英文切换
asp.net 2.0中的App_GlobalResources可以用来解决本地化的问题,程序会根据浏览器的语言首选项自动判断显示出本地化的界面. 首先在App_GlobalResources新建re ...
网站 html 中英文切换 - API 总结篇
网站 html 中英文切换 - API 总结篇引言: 项目要求实现中英文等国际化语言切换,实现的方法多种多样,这里简单总结一下部分方法的优缺点. 基本上都是:使用第三方API接口或者自定义编写中 ...
自动判断浏览器的中英文版本自动跳转网站中英文页面代码
许多网站现在都是依靠自动判断浏览器的中英文版本来判断给你打开网站的中文还是英文版,也许好多朋友还不知道这个代码,今天正好给公司改版企业网站用到了,在此公布出来,供大家一起学习. HTML网页根据来访者 ...
实现网站验证码切换功能
实现网站验证码切换功能一.样例样例1. 样例2. 二.实现原理三.实现代码 com.fry.servlet.VerifyCodeServlet 1 package com.fry.servlet ...
二代CMS旅游网站程序国际版开发中（支持英文、法文等），支持拓展语言包
二代CMS旅游网站程序国际版开发中(支持英文.法文.德文等),支持拓展语言包,理论上可以拓展成任何一种语言,前端和后端都支持在线语言切换,前端还支持支付货币的币种切换,敬请期待! 转载于:https: ...
GOFLY在线客服系统/外贸网站在线客服+多语言支持外贸网站即时通讯工具/中英文切换教程...
GOFLY在线客服系统支持多语言展示,特别适合外贸网站和访客即时通讯沟通访客界面切换成英文的方式方法访客链接url参数中增加lang=en,界面就会切换成英文: 底部版权中文字符,管理员可以在后台 ...
怎么看网站用的什么服务器,教你如何查看一个网站的服务器，系统和语言，地理位置，IP地址，所属国家，服务器类型及使用程序...
通过下面这个网址可以查看出大多数服务器的相关信息.比较齐全. 要看一个网站的服务器,系统和语言一般有几种办法 1.在网站的域名下随便打一个网址,对于一般的网站,服务器就会在404的错误页面里告诉你这些 ...

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

1、封装language.js

2、编写测试页面

三、其他

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

最新文章

热门文章