前端多语言切换-jquery.i18n

最新推荐文章于 2024-05-15 13:09:23 发布

Wynt

最新推荐文章于 2024-05-15 13:09:23 发布

阅读量1.2k

点赞数

分类专栏：语言切换文章标签：国际化

本文链接：https://blog.csdn.net/m0_37554403/article/details/98748755

版权

语言切换专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文原创地址：http://www.cnblogs.com/landeanfen/p/7581609.html
以下是本人使用流程：

1.下载jquery.i18n

链接：https://pan.baidu.com/s/1aN1_0Csii3K9S5fLy5MldQ
提取码：vs8x
包含文件：jquery.i18n.properties.js、jquery.i18n.properties.min.js、language.extensions.js 后续操作需要用到

2.创建资源文件

在项目中创建资源文件，如下图：

这里设置了中文（en）和英文（zh-CN）,文件名后缀需指定.properties.
需要设置切换的资源可保存在此文件中格式如下：
在这里插入图片描述

3.页面配置

引入：jq、jquery.i18n.properties.js、language.extensions.js文件。
jquery.i18n.properties.js、language.extensions.js文件在1步骤中的网盘有提供。

切换语言时将所选语言存入Cookie中，建议每次触发时先判断该Cookie是否为空，有值的话先清空,不然有的电脑IE可能会出现问题。代码如下：

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <select id="ChangeLanguage">
        <option value="zh-CN">中文</option>
        <option value="en">English</option>
    </select>
    <h1 data-i18n-text="Name"></h1>
    <input type="text" data-i18n-value="Name" name="name" value="" />
</body>
</html>
<script src="Content/jquery-2.1.1.js"></script>
<script src="Content/i18n/jquery.i18n.properties.js"></script>
<script src="Content/i18n/language.extensions.js"></script>
<script>
    $(function () {
        var languageCookie = getCookie("userLanguage");
        if (languageCookie) {
            $("#ChangeLanguage").find("option").each(function (i) {
                let $this = $(this).val();
                if ($this == languageCookie) {
                    $(this).attr("selected", true);
                }
            })
        }

        $("#ChangeLanguage").change(function () {
            let $this = $(this).val();
            //在切换语言Cookie时，如果已经存在该Cookie则先清除
            if (languageCookie) {
                getCookie("userLanguage", null)
            }
            //存入Cookie
            getCookie("userLanguage", $this, {
                expires: 1440,
                path: '/'
            });
            window.location.reload();
        })

    })
</script>

注意：在运行时前端jq会出现报错或警告，因为properties文件类型无法识别，需要手动将该文件类型加入可识别文件类型。如：

<system.webServer>
    <staticContent>
      <!--加载中英文切换-->
      <mimeMap fileExtension=".properties" mimeType="application/x-javascript"/>
    </staticContent>
  </system.webServer>

关于language.extensions.js代码是作者封装了i18n，使调用更加方便。

///**
// * cookie操作
// */
var getCookie = function (name, value, options) {
    if (typeof value !== 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires === 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires === 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        var path = options.path ? '; path=' + options.path : '';
        var domain = options.domain ? '; domain=' + options.domain : '';
        var s = [cookie, expires, path, domain, secure].join('');
        var secure = options.secure ? '; secure' : '';
        var c = [name, '=', encodeURIComponent(value)].join('');
        var cookie = [c, expires, path, domain, secure].join('');
        document.cookie = cookie;
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

/**
 * 获取浏览器语言类型
 * @return {string} 浏览器国家语言
 */
var getNavLanguage = function () {
    if (navigator.appName === "Netscape") {
        var navLanguage = navigator.language;
        return navLanguage.substr(0, 2);
    }
    return false;
};

/**
 * 设置语言类型： 默认为英文
 */
var i18nLanguage = "en";

/*
设置一下网站支持的语言种类
 */
var webLanguage = ['zh-CN', 'en'];

///**
// * 执行页面i18n方法
// * return
// */
var execI18n = function () {
    /*
    获取一下资源文件名
     */
    //var optionEle = $("#i18n_pagename");
    //if (optionEle.length < 1) {
    //    console.log("未找到页面名称元素，请在页面写入\n <meta id=\"i18n_pagename\" content=\"页面名(对应语言包的语言文件名)\">");
    //    return false;
    //}
    //var sourceName = optionEle.attr('content');
    //sourceName = sourceName.split('-');
    /*
    首先获取用户浏览器设备之前选择过的语言类型
     */
    if (getCookie("userLanguage")) {
        i18nLanguage = getCookie("userLanguage");
    } else {
        // 获取浏览器语言
        var navLanguage = getNavLanguage();
        if (navLanguage) {
            // 判断是否在网站支持语言数组里
            var charSize = $.inArray(navLanguage, webLanguage);
            if (charSize > -1) {
                i18nLanguage = navLanguage;
                // 存到缓存中
                getCookie("userLanguage", navLanguage);
            }
        } else {
            console.log("not navigator");
            return false;
        }
    }
    /* 需要引入 i18n 文件*/
    if ($.i18n === undefined) {
        console.log("请引入i18n js 文件");
        return false;
    }

    /*
    这里需要进行i18n的翻译
     */
    jQuery.i18n.properties({
        name: 'common',//文件名称
        path: '/Content/i18n/' + i18nLanguage + '/', //资源文件路径
        mode: 'map', //用Map的方式使用资源文件中的值
        language: i18nLanguage,
        callback: function () {//加载成功后设置显示内容
            //console.log("i18n赋值中...");
            try {
                //初始化页面元素
                $('[data-i18n-placeholder]').each(function () {
                    $(this).attr('placeholder', $.i18n.prop($(this).data("i18n-placeholder")));
                });
                $('[data-i18n-text]').each(function () {
                    //如果text里面还有html需要过滤掉
                    var html = $(this).html();
                    var reg = /<(.*)>/;
                    if (reg.test(html)) {
                        var htmlValue = reg.exec(html)[0];
                        $(this).html(htmlValue + $.i18n.prop($(this).data('i18n-text')));
                    }
                    else {
                        $(this).text($.i18n.prop($(this).data('i18n-text')));
                    }
                });
                $('[data-i18n-value]').each(function () {
                    $(this).val($.i18n.prop($(this).data('i18n-value')));
                });
            }
            catch (ex) {
                console.log(ex);
            }
            //console.log("i18n写入完毕");
        }
    });
};

/*页面执行加载执行*/
$(function () {
    /*执行I18n翻译*/
    execI18n();
});

效果图：
在这里插入图片描述

Wynt

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端多语言切换-jquery.i18n

本文原创地址：http://www.cnblogs.com/landeanfen/p/7581609.html以下是本人使用流程：1.下载jquery.i18n链接：https://pan.baidu.com/s/1aN1_0Csii3K9S5fLy5MldQ提取码：vs8x包含文件：jquery.i18n.properties.js、jquery.i18n.properties.min...
复制链接

扫一扫

专栏目录