好资源导航 » 文章资讯 » JS如何在不同平台实现多语言方式

JS如何在不同平台实现多语言方式

2023-07-20 17:46:03 73

应用场景：

在不同移动平台（IOS，Android）上，建立一套与HTML页面通讯框架；主要业务逻辑使用HTML开发；想支持多语言开发。

动机：

通过主动发消息的方式，在页面完成初始化前，获取当前语言选项，并且根据该语言选项，调用对应的JS文件（每种语言对应一个JS文件）解析页面。

实现细节：

向本地语言框架发请求获取语言种类；

$(document).on("pageinit",function(){
/*Kaiwii向本地代码发请求获取当前语言种类*/
});

本地语言框架触发回调函数（JS方法）：根据语言选项，动态将对应语言的JS文件嵌入HTML并且触发其执行；

/*Kaiwii本地语言框架回调本方法*/
functionGetLanguageCodeCallBack(Jstring,ERROR){
vari18File=$("script[name='i18']");
if(i18File.length==0){//没有成功加载js文件
vari18FileLink="";
switch(Jstring){
case"EN":
i18FileLink="";
break;
case"CN":
i18FileLink="";
break;
}
$("head").append(i18FileLink);
}else{//成功加载js文件
switch(Jstring){
case"EN":
$(i18File).attr("src","../../js/i18.js");
break;
case"CN":
$(i18File).attr("src","../../js/i18_CN.js");
break;
}
/*主动触发更新HTML*/
updatei18Spans();
}
}

不同语言对应的JS文件（如i18.js）：

1、使用JSON对象存储KEY－VALUE［不同语言版本的JS文件仅仅是VALUE不同（VALUE为对应语言版本中的值）］；

2、HTML中的静态部分需要调用JS方法修改DOM对象的属性方式完成多语言动态化（通过调用updatei18spans()触发）；动态部分直接调用即可；

/*用于国际化*/
/*Kaiwii*/

/*对应关系表（key为元素的ID，value为国际化下的显示内容*//*span部分*/varspans={"DemandDepositAccountTitle":"CCBCurrentAccount"};//本地代码交互的部分varlocale_vars={"enquiryTitle":"AccountInfoInquiry"};vari18placeholder={"请输入单位名称或账号":"Organization'sName/Account","开始日期":"StartDate","截止日期":"EndDate"};functionupdatei18Spans(){for(indexinspans){$("span[i18Id='"+index+"']").html(spans[index]);}for(indexini18placeholder){$("input[placeholder='"+index+"']").attr("placeholder",i18placeholder[index]);}}$(function(){//加载显示内容方法updatei18Spans();});

调用多语言动态框架修改：

1、静态部分：

HTML上：

2、动态部分：

JS代码中：

liElement+=""+locale_vars.enquiryTitle+"";

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

JS如何在不同平台实现多语言方式

热门推荐

随机推荐