應用場景:
在不同移動平臺(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*/
/*對應關係表(key爲元素的ID,value爲國際化下的顯示內容*//*span 部分*/var spans = {"DemandDepositAccountTitle":"CCB Current Account"};//本地代碼交互的部分var locale_vars = {"enquiryTitle":"Account Info Inquiry"};var i18placeholder = {"請輸入單位名稱或賬號":"Organization's Name/Account","
開始日期":"Start Date"," 截止日期":"End Date"};function updatei18Spans(){ for(index in spans){ $("span[i18Id='"+index+"']").html(spans[index]); } for(index in i18placeholder){ $("input[placeholder='"+index+"']").attr("placeholder",i18placeholder[index]); }}$(function(){//加載顯示內容方法
updatei18Spans(); });
- 調用多語言動態框架修改:
1、靜態部分:
HTML上:
<span i18Id="DemandDepositAccountTitle"></span>
2、動態部分:
JS代碼中:liElement += "<span ACC_NO='"+ACC_NO+"' CshEx_Cd='"+CshEx_Cd+"' CcyCd='"+CcyCd+"' onclick='renderBAL(this)' class='font14' style='color:#306ed2'>"+locale_vars.enquiryTitle+"</span>";