应用场景:
在不同移动平台(IOS,Android)上,建立一套与HTML页面通讯框架;主要业务逻辑使用HTML开发;想支持多语言开发。
动机:
通过主动发消息的方式,在页面完成初始化前,获取当前语言选项,并且根据该语言选项,调用对应的JS文件(每种语言对应一个JS文件)解析页面。
实现细节:
- 向本地语言框架发请求获取语言种类;
- $(document).on("pageinit",function(){
- /*Kaiwii 向本地代码发请求获取当前语言种类*/
- });
- 本地语言框架触发回调函数(JS方法):根据语言选项,动态将对应语言的JS文件嵌入HTML并且触发其执行;
- /*Kaiwii 本地语言框架回调本方法*/
- function GetLanguageCodeCallBack(Jstring,ERROR){
- var i18File = $("script[name='i18']");
- if(i18File.length==0){//没有成功加载js文件
- var i18FileLink = "<script name='i18' src='../../js/i18.js'></script>";
- switch (Jstring){
- case "EN":
- i18FileLink = "<script name='i18' src='../../js/i18.js'></script>";
- break;
- case "CN":
- i18FileLink = "<script name='i18' src='../../js/i18_CN.js'></script>";
- 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()触发);动态部分直接调用即可;
- /*用于国际化*/
- <pre name="code" class="javascript">/*Kaiwii*/
- 调用多语言动态框架修改:
1、静态部分:
HTML上:
- <span i18Id="DemandDepositAccountTitle"></span>
2、动态部分:
JS代码中:
- liElement += "<span ACC_NO='"+ACC_NO+"' CshEx_Cd='"+CshEx_Cd+"' CcyCd='"+CcyCd+"' οnclick='renderBAL(this)' class='font14' style='color:#306ed2'>"+locale_vars.enquiryTitle+"</span>";