h5实现i18n语言切换

前言

点击下拉框切换语言，每次打开网站，先获取cookie存储里language，如果有值就设置下拉框当前选中的值，否则获取浏览器语言，并通过cookie存储当前语言。每次切换语言调用方法，并通过cookie存储当前语言，页面刷新。

引入

// 依赖jquery
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/i18next/1.11.2/i18next.min.js"></script>复制

dom

<select name="" id="i18-select">
	<option value="zh">中文</option>
	<option value="en" >english</option>
</select>
<h1 data-i18n="nav.home"></h1>
<h1 data-i18n="nav.page1"></h1>复制

文件

i18n/en/translation.json:

{
	"nav": {
		"home": "Home",
		"page1": "About Us"
	},
}复制

i18n/zh/translation.json:

{  
    "nav" :{  
        "home": "网站首页",
        "page1": "关于我们" 
    },
}复制

方法

/* 中英文切换 */
$(function(){
	 /*获取浏览器的语言 */
	 function getLang(){
		 var langType = getCookie("language");
		 if(langType){
			 // 设置下拉框当前语言
			 $('#i18-select').val(langType);
		 }else{
			 var type = navigator.appName;
			    if (type == "Netscape"){
			        var lang = navigator.language;//获取浏览器配置语言，支持非IE浏览器
			    }else{
			        var lang = navigator.userLanguage;//获取浏览器配置语言，支持IE5+ == navigator.systemLanguage
			    };
			    var lang = lang.substr(0, 2);//获取浏览器配置语言前两位
			 			  // 设置下拉框当前语言
			 			  $('#i18-select').val(lang);
			   saveCookie('language',lang, 1); 
		 }
	 }
	 getLang();
						/*
						 *存cookie(cookieName--字段名   cookieValue--字段值   cookieDates--有效时间)
						 * */
					    function saveCookie(cookieName,cookieValue,cookieDates){
					        var d = new Date();
					        d.setDate(d.getDate()+cookieDates);
					        document.cookie = cookieName+"="+cookieValue+";expires="+d.toGMTString();
					    }
					    //取cookie
					    function getCookie(cookieName){
					        var cookieStr = unescape(document.cookie);
					        var arr = cookieStr.split("; ");
					        var cookieValue = "";
					        for(var i=0;i<arr.length;i++){
					            var temp = arr[i].split("=");
					            if(temp[0]==cookieName){
					                cookieValue = temp[1];
					                break;
					            }
					        }
					        return cookieValue;
					    }
						function lang(language){
							$.i18n.init({
								lng: language, //指定语言
								resGetPath: './i18n/'+language+'/translation.json',//语言文件的路径
								ns: {
									namespaces: ['translation', 'message'],
									defaultNs: 'translation' //默认使用的，不指定namespace时
								}
							}, function(err, t) {
								$('[data-i18n]').i18n(); // 通过选择器集体翻译
								$('[data-i18n-html]').each(function(){
									var date_name = $(this).attr("data-i18n-html");
									$(this).html($.t(date_name));
								});
			//					var temp = $.t("nav.home"); //通过t函数获得某个翻译的值
								$.t("message:app.child", {
									count: '1'
								}); //使用namespace，并将count替换成1，其值为1 child
								$.t("message:app.child_plural", {
									count: '2'
								}); //将count替换成2，其值为2 children
							});
						}
						var langType = getCookie("language")||"zh";
						lang(langType);
						
						// 下拉框切换
						$('#i18-select').on('change',function(){
							var val = $(this).val();
							if(val == 'zh'){
								lang("zh");
								saveCookie("language","zh",1);
								location.reload()//刷新页面
							}else{
								lang("en");
								saveCookie("language","en",1);
								location.reload()
							}
						})
					})复制