i18n_language/js/language.js

//网站默认语言标识
var languageKey = "zh_CN";
/*
设置一下网站支持的语言种类
zh_CN(中文简体)、en_US(英语)
 */
var languageArray = ['zh_CN', 'en_US'];

/**
 * 页面初始化执行方法
 */
$(document).ready(async function () {
    //1.cookie是否存在
    if ($.cookie("userLanguage")) {
        languageKey = $.cookie("userLanguage");
    } else {
        //2.1 获取用户设置的浏览器语言
        var webLanguage = $.i18n.normaliseLanguageCode({});
        var charSize = $.inArray(webLanguage, languageArray);
        if (charSize > -1) {
            languageKey = webLanguage;
            // 存到缓存中
            $.cookie("userLanguage", webLanguage, {
                expires: 7
            });
        } else {
            //不支持的语言，使用默认中文
        }
    }
    $(".lan_select").val(languageKey)

    /**
     * js中调用翻译代码示例（方法一）
     */
    // let selectElement = document.getElementById('mySelect');
    // // 定义选项数据
    // let optionsData = [
    //     {
    //         value: '1',
    //         //这里以js文件中name为例，进行翻译
    //         text: 'tel'
    //     },
    //     {
    //         value: '2',
    //         text: 'name'
    //     },
    // ];
    // console.log(optionsData,76)
    // // 填充<select>元素
    // optionsData.forEach(option => {
    //     const newOption = document.createElement('option');
    //     //给元素添加翻译标识
    //     newOption.setAttribute("data-translate",option.text)
    //     newOption.value = option.value;
    //     newOption.textContent = option.text;
    //     selectElement.appendChild(newOption);
    // });
    loadProperties(languageKey);
    jsDemo();
});

/**
 * js中调用翻译代码示例（方法二）
 */
async function jsDemo() {
    let selectElement = document.getElementById('mySelect');
    // 定义选项数据
    let optionsData = [
        {
            value: '1',
            //这里以js文件中name为例，进行翻译
            text: await getTextByTranslationKey('tel')
        },
        {
            value: '2',
            text: await getTextByTranslationKey('name')
        },
    ];
    // 填充<select>元素
    optionsData.forEach(option => {
        const newOption = document.createElement('option');
        //给元素添加翻译标识
        // newOption.setAttribute("data-translate",option.text)
        newOption.value = option.value;
        newOption.textContent = option.text;
        selectElement.appendChild(newOption);
    });
}
/**
 * 语言切换事件监听，切换后存cookie
 */
$(".lan_select").change(function () {
    languageKey = $(".lan_select").val()
    $.cookie("userLanguage", languageKey, {
        expires: 7
    });
    loadProperties(languageKey);
    location.reload();
});

/**
 * 自动翻译页面内容
 * @param type 语言包标识
 */
function loadProperties(type) {
    $.i18n.properties({
        name: 'strings', // 资源文件名称
        path: 'languages/', // 资源文件所在目录路径
        mode: 'map', // 模式：变量或 Map
        language: type, // 对应的语言
        cache: false,
        encoding: 'UTF-8',
        callback: function () {
            // 回调方法
            $('[data-translate]').each(function () {
                //遍历每一个需要翻译的元素，本次翻译text
                var translationKey = $(this).data('translate');
                $(this).text($.i18n.prop(translationKey));
            });
            $('[data-translate-placeholder]').each(function () {
                //遍历每一个需要翻译的元素，本次翻译placeholder
                var translationKey = $(this).data('translate-placeholder');
                $(this).attr("placeholder", $.i18n.prop(translationKey))
            });
        }
    });
}

/**
 * 获取指定翻译内容按钮点击执行方法---临时演示用，可以删掉
 */
function getKeyClick() {
    getTextByTranslationKey($("#data_key").val())
}
/**
 * 主动翻译指定key
 * @param translationKey 需要翻译的key
 */
function getTextByTranslationKey(translationKey) {
    return new Promise((resolve, reject) => {
        $.i18n.properties({
            name: 'strings', // 资源文件名称
            path: 'languages/', // 资源文件所在目录路径
            mode: 'map', // 模式：变量或 Map
            language: languageKey, // 对应的语言
            cache: false,
            encoding: 'UTF-8',
            callback: function () {
                // 回调方法
                //这一行演示用，可以删掉
                $("#data_key_text").text($.i18n.prop(translationKey))
                resolve($.i18n.prop(translationKey))
            }
        });
    })
}