JS在不同移动平台实现多语言动态加载方案

应用场景与动机

应用场景：

针对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文件结构

不同语言对应的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>";

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。