應用場景：

在不同移動平台(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 = "";
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 部分*/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上：

2、動態部分：

JS代碼中：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，