JS国际化网站中英文切换（理论支持所有语言）应用于h5版APP
网页框架类APP实现国际化参考文案一
参考：https://blog.csdn.net/CSDN_LQR/article/details/78026254
另外付有自己实现的方法 本人用于H5版的APP使用
一、简述
把页面成国际化，实现中英文切换，为此，网上找了一些中英文切换的解决方案，大概为如下两种：
1、使用谷歌整站翻译Api
优点：只须调用接口，即可轻松完成整站翻译，翻译准确度还行。
缺点：需要梯子。
参考文章：js代码实现网站中英文相互翻译
2、自己编写中英文对照表，用js控制
优点：一对一翻译，所以准确度最高。
缺点：需要编写大量中英文对照表，只适合于少量的固定翻译。
参考文章：html页面如何实现中英文切换？
由于公司的要求是把整站进行翻译，且官网中存在新闻，即存在大量不可预料的数据，同时考虑到富文本数据不好翻译。所以，总的来说，第一种方案最为合适，不过可惜，需要梯子，没办法，只能别寻出路。好在微软也有一个类似谷歌整站翻译的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进行自定义扩展即可。
附：
我简单的用requere实现了下 ，支持中英韩语，默认其他均英语
首先将一入几个自己写好的语言包：key为中文；value为相应国际化的语言，每次动态加载value 就阔以了
eg:我称为语言包
define(function(){
var object = {
"年":"year",
"月":"month",
"周":"week",
"日":"day",
"时":"hour",
"分":"minute",
"秒":"seconds",
}
return object
}
加载逻辑：
define(function(){
//<-- ####### internationalization ########## -->
var languageObj=null
switch (navigator.language) {
case "zh-CN":
languageObj={}
break;
case "en-US":
loadModule('english')
break;
case "ko-KR":
loadModule('korean')
break;
default:
loadModule('english')
break;
}
function loadModule(jsModule,black){
require([jsModule], function(obj){
languageObj = obj
typeof block =="function"&&block(obj)
})
}
var internationalization = {
tell:function (key) {
return languageObj[key]||key
}
}
window.$i18n=internationalization.tell
return internationalization
})
由于部分机型的适配问题
更改为提前加载英语语言包
define(["english"], function(englishObj) {
//<-- ####### internationalization ########## -->
var internationalization = {
tell: function(key) {
switch (navigator.language) {
case "zh-CN":
return key
break;
case "en-US":
return englishObj[key]||key
break;
case "ko-KR":
return englishObj[key]||key
break;
default:
return englishObj[key]||key
break;
}
}
}
window.$i18n = internationalization.tell
return internationalization
})
启动加载后在需要国际化处理的地方通通用$i18n("中文")即可
简单可行。
JS国际化网站中英文切换（理论支持所有语言）应用于h5版APP的更多相关文章
- [UE4]国际化，中英文切换
只有“Text”数据类型才支持国际化 必须以独立游戏窗口运行,语音切换才会起作用.
- ThinkPHP3.2中英文切换！
小伙伴们好久不见!!! 最近公司项目版本升级,小梦已经忙成了狗,无暇顾及文章,今天抽时间写一篇助助兴! 用Thinkphp这个国产框架已经2年多了,现在有一个小功能:网站中英文切换功能,当然这 ...
- SpringMVC 国际化-中英文切换
项目结构 1.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...
- 【vue】中英文切换（使用 vue-i18n ）
一.准备工作 1.vue-i18n 1.仓库地址 2.兼容性:支持 Vue.js 2.x 以上版本 1-1.安装依赖vue-i18n (c)npm install vue-i18n 1-2.使用 在 ...
- 纯js国际化(i18n)
i18n,是internationalization单词的简写,中间18个字符略去,简称i18n,意图就是实现国际化,方便产品在不同的场景下使用 目标:可以点击切换语言或者ChangeLanguage ...
- 正则表达式split匹配多种例如 “】”，“，”两种（页面级中英文切换方案）
在做登陆界面的时候,因为涉及到中英文 因为前后台已经分离,所以前端需要自行设计中英文 做法: 编写两个文件,一个中文文件,一个是英文文件,分别放在对应的目录下面 文件的内容 { "login ...
- AudioPlayer.js，一个响应式且支持触摸操作的jquery音频插件
AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...
- php或js判断网站访问者来自手机或者pc
php或js判断网站访问者来自手机或者pc机 2013年9月26日,在弄wtuonline的时候为了区分用户是来自手机版浏览器还是pc,针对不同平台选择不同的网站版本,最终总结如下: ...
- php或js判断网站访问者来自手机或者pc机
php或js判断网站访问者来自手机或者pc机 2013年9月26日,在弄wtuonline的时候为了区分用户是来自手机版浏览器还是pc,针对不同平台选择不同的网站版本,最终总结如下: ...
随机推荐
- salt-master命令详解
**salt-master命令** 命令行官网学习网站:http://docs.saltstack.cn/ref/cli/index.html salt salt-call salt-cp salt- ...
- 【Node.js】Node.js的调试
目录结构: contents structure [-] 使用console.log() 使用Chrome DevTools 使用Visual Studio Code 与JavaScript运行在浏览 ...
- 面试突击（七）——JVM如何加载Java字节码信息的？
声明:本文图片均来自网络,我只是进行了选择,利用一图胜千言的力量来帮助自己快速的回忆相关的知识点 1:先看一下Java类文件的转换过程,如下所示,Java字节码文件是通过类加载子系统来放入JVM的内存 ...
- java多线程（六）线程控制类
1. 多线程控制类 为了保证多线程的三个特性,Java引入了很多线程控制机制,下面介绍其中常用的几种: l ThreadLocal l 原子类 l Lock类 l Volatile关键字 ...
- RunTime总结:
oc动态性, 运行时将代码转化为runtime的C代码 RunTime运行流程: 生成对应objc_msgSend方法 isa指针查看当前类有没有这个方法, 之后寻找父类, 每个方法SEL(方法选择器 ...
- Sql server 中将数据行转列列转行（一）
在做一些数据分析与数据展示时,经常会遇到行转列,列转行的需求,今天就来总结下: 在开始之前,先来创建一个临时表,并且写入一些测试数据: /* 第一步:创建临时表结构 */ CREATE TABLE # ...
- JAVA中用StopWatch计算代码耗时的方法
StopWatch翻译过来的意思就是秒表,其作用也就像我们平时使用的秒一样.spring中就有提供这个工具类(org.springframework.util.StopWatch). 日常开发中,经常 ...
- .NET 小程序微信用户支付
微信支付有两种模式:微信用户主动发起的支付.签约委托支付协议后自动支付. 自动支付又分为两种:首次支付时签约.纯签约. 首次支付时签约和纯签约在后续周期若需要发起自动扣款时,需要在应用服务中发起申请扣 ...
- (IO模型介绍,阻塞IO,非阻塞IO,多路复用IO,异步IO,IO模型比较分析,selectors模块,垃圾回收机制)
参考博客: https://www.cnblogs.com/xiao987334176/p/9056511.html 内容回顾 协程实际上是一个线程,执行了多个任务,遇到IO就切换 切换,可以使用yi ...
- (CSDN 迁移) jFinal找不到或无法加载主类
错误: 找不到或无法加载主类 com.demo.common.DemoConfig 项目上右键 -> Build Path -> Order and Export 修改顺序: 从上到下依次 ...