JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP

您所在的位置:网站首页 怎么设置网页英文翻译功能切换 JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP

JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP

2024-02-21 02:35| 来源: 网络整理| 查看: 265

 

网页框架类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();

Microsoft Widget API Sample 中英文切换 你好 $("#change").click(function(){ translate(); })

 

试试看效果吧,反正我觉得还行~

三、其他

上面编写的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(){ // 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) { // 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("中文")即可 

简单可行。

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3