前言
点击下拉框切换语言,每次打开网站,先获取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()
}
})
})