應用場景：

在不同移動平臺（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>";

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。