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

最新推荐文章于 2024-08-15 10:00:13 发布

前端小问题

最新推荐文章于 2024-08-15 10:00:13 发布

阅读量2.1k

点赞数

分类专栏：小功能文章标签： jquery html i18n 语言国际化

本文链接：https://blog.csdn.net/weixin_43989837/article/details/109670928

版权

小功能专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文详细介绍了如何实现网页的多语言兼容，包括通过获取浏览器语言、配置i18n函数、加载资源文件和应用到页面元素上，以实现页面内容随浏览器语言自动切换。具体步骤包括：检测浏览器语言、封装i18n加载函数、设置页面元素内容以及创建和使用JSON语言文件。此外，还展示了页面元素的示例应用。

摘要由CSDN通过智能技术生成

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

实现方法：
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 ID
select-specifications	=	点击选择充值规格
check-account	=	核对充值账号
whatID	=	什么是 FaceCast ID ？
getID	=	输入 FaceCast ID
maskgetID = 输入 FaceCast ID
toastTips-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.充值金额和账户 ID
recharge-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 ID
rechargeFAQ_title	=	常见问题
PayStatusSuccess_title	=	交易成功
PayStatusFail_title	=	交易失败
PayStatusCancel_title	=	交易取消
Diamonds_title	=	FaceCast 钻石充值官方网站
buy-notice	=	注意  pay.facecast.live 是 FaceCast 唯一官方购买钻石网站，客服咨询请进入【消息】-【官方消息】-【反馈与帮助】
RechargeHelp_title	=	充值帮助
openAPP	=	打开 FaceCast APP
buy-diamonds-tit	=	购买钻石服务
description	=	FaceCast 唯一官方钻石充值网站 ， FaceCast 是一款国际化社交软件，全球超过150多个国家和地区的用户正在使用 FaceCast
keywords	=	FaceCast 充值,FaceCast 钻石充值,FaceCast 官方充值,FaceCast 官方充值网站
wxPay = 请确认微信支付是否已完成
Completed = 已完成支付
failedPay = 支付遇到问题,重新支付
toastTips-no-complete = 支付未完成，请重新支付

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

<body style="background: #F7F7F7;">
		<h3 class="recharge-h3 i18n" id="common-problem"></h3>
		<div class="recharge-text mar-btm">
			<p class="text-link i18n" id="whether-account"></p>
			<p class="text-tips i18n" id="answer-whether-account"></p>
			<hr class="hr-line" />
			<p class="text-link i18n" id="no-account"></p>
			<p class="text-tips i18n" id="answer-no-account"></p>
			<p class="text-tips i18n" id="recharge-money"></p>
			<p class="text-tips i18n" id="recharge-time"></p>
			<p class="text-tips i18n" id="recharge-shot"></p>
			<hr class="hr-line" />
			<p class="text-link i18n" id="recharge-wrong"> </p>
			<p class="text-tips i18n" id="answer-recharge-wrong"></p>
			<hr class="hr-line" />
			<p class="text-link i18n" id="refund"></p>
			<p class="text-tips i18n" id="answer-refund"></p>
		</div>
		<!-- Google Tag Manager (noscript) -->
		<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKG5ZCG"
		height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
		<!-- End Google Tag Manager (noscript) -->
	</body>