應用場景：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。