900字范文 > 使用jquery.i18n实现国际化多语言显示

使用jquery.i18n实现国际化多语言显示

时间：2020-05-30 14:52:51

问题描述：

有时候你写的页面需要兼容多国语言，不同的国家浏览不同的语言。这种方法并不需要重新请求数据库拿数据，只需要更改文案之后页面会自动根据浏览器语言自动切换。

实现方法：

1，首先需要获取到浏览器的语言。当然还需要引入jquery.i18n.js 和jquery.js。

//begin i18n获取浏览器语言jQuery(document).ready(function() {var language;language = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言 if(language == 'zh-MO' || language == 'zh_TW' || language == 'zh-rHK') {language = 'zh_HK';}if(language.indexOf("zh_HANT") != -1) {language = "zh_HK";}if(language == 'zh_CN' || language == 'zh_CH' || language == 'zh_AE') {language = 'zh';}// 这个就是将i18n翻译后的语言转换出来的函数loadProperties(language);console.log(language);$(document).attr("title", $.i18n.prop('rechargeFAQ_title'));$("meta[name='Keywords']").attr('content', $.i18n.prop('keywords'));$("meta[name='Description']").attr('content', $.i18n.prop('description'));// ar翻转页面if(language == 'ar') {$("html").css("direction", "rtl");$(".recharge-h3").css("padding-right", "0.32rem");}});

2，你需要配置i18n的函数配置。我这里封装了一个函数。

//用于页面初始化之后加载页面function loadProperties(language) {jQuery.i18n.properties({// 加载资浏览器语言对应的资源文件name: 'multi', // 资源文件名称path: './i18n/', // 资源文件路径cache: true,language: language, //zh中文 en英文mode: 'map', // 用 Map 的方式使用资源文件中的值callback: function() {// 加载成功后设置显示内容// $(document).attr("title",$.i18n.prop('login.title'));var insertEle = $(".i18n");insertEle.each(function() {// 根据i18n元素的 ID 获取内容写入页面热// $(this).html($(this).attr('id'));try {if(typeof($(this).attr("placeholder"))!="undefined"){$(this).attr("placeholder",$.i18n.prop($(this).attr('id'))); }else if(typeof($(this).attr("button"))!="undefined"){$(this).attr("button",$.i18n.prop($(this).attr('id'))); }else {$(this).html($.i18n.prop($(this).attr('id')));}} catch(e) {console.log("key不存在，请在配置文件中配置对应的key：" + $(this).attr('id'));}});}});};

3，使用方法

首先需要建一个文件夹。文件夹的名字跟第二步中path配置的要一样。至于文件夹下的multi文件都是固定的格式。i18n_en.json中_后面的是语言的简写，en代表的是英文，你需要兼容哪种语言就要添加一种该语言的json文件，

4，json文件中的数据样式如下：

等号前面的是页面中元素上的id标识，后面的是这个元素中应该显示的数据。

EnterID=点击输入 FaceCast IDselect-specifications=点击选择充值规格check-account=核对充值账号whatID=什么是 FaceCast ID ？getID=输入 FaceCast IDmaskgetID = 输入 FaceCast IDtoastTips-format-error=输入格式有误toastTips-no-exist=该ID不存在toastTipsPlease=请先核对充值账号common-problem=常见问题transaction-succeeded=交易成功transaction-failed=交易失败transaction-cancel=交易取消whether-account=1.我充值后怎么查看是否到账？answer-whether-account=充值后可回到 APP 的【我的】-【钱包】中查看钻石no-account=2.充值后若是没有到账怎么办？answer-no-account=请在 APP 的【消息】-【官方消息】-【反馈与帮助】中提交您的问题，并提供以下信息，我们的客服将为您提供帮助。recharge-money=1.充值金额和账户 IDrecharge-time=2.充值的时间和日期recharge-shot=3.支付成功的屏幕截图recharge-wrong=3.充错账户，充错金额怎么办answer-recharge-wrong=请您在输入支付密码前，务必仔细确认充值账户 ID 和充值金额信息后再进行购买。错充金额无法退还，错充账户您可尝试与实际充值的 ID 用户联系，与对方协商是否愿意补偿您的充值。refund=4.退款answer-refund=抱歉！FaceCast 目前不支持任何形式的退款。buy-enter-link=购买钻石可通过链接进行充值，<a class="web-link" href="https://pay.facecast.live/" >https://pay.facecast.live</a> 将链接复制在手机浏览器中打开，进入购买页面，核对账号后，选择相应的规格并使用合适的支付方式进行支付即可～优惠多多！buy-notice-a=注意: <a>pay.facecast.live</a> 是 FaceCast 唯一官方购买钻石网址replace=更换sureBtn=确定pay-style=选择支付方式goBack=回到首页toastTips=输入 FaceCast IDrechargeFAQ_title=常见问题PayStatusSuccess_title=交易成功PayStatusFail_title=交易失败PayStatusCancel_title=交易取消Diamonds_title=FaceCast 钻石充值官方网站buy-notice=注意 pay.facecast.live 是 FaceCast 唯一官方购买钻石网站，客服咨询请进入【消息】-【官方消息】-【反馈与帮助】RechargeHelp_title=充值帮助openAPP=打开 FaceCast APPbuy-diamonds-tit=购买钻石服务description=FaceCast 唯一官方钻石充值网站， FaceCast 是一款国际化社交软件，全球超过150多个国家和地区的用户正在使用 FaceCastkeywords=FaceCast 充值,FaceCast 钻石充值,FaceCast 官方充值,FaceCast 官方充值网站wxPay = 请确认微信支付是否已完成Completed = 已完成支付failedPay = 支付遇到问题,重新支付toastTips-no-complete = 支付未完成，请重新支付

5，页面中的应用。

需要同时给元素添加id和class，这个id是第四条中提到的等号前面的id。这个类是一个统一的，只要你需要添加多语言兼容你就需要在这个元素中添加一个i18n的类。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。