客服前端开发：中英文多语言自动识别功能【唯一客服】网站客服系统

唯一Chat

发布于 2023-01-10 05:56:03

61900

代码可运行

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

运行总次数：0

代码可运行

我开发的客服系统有中英文切换功能，并且能根据浏览器自动识别中英文

也可以根据url参数中的lang来识别，还能根据localStorge里面的参数进行识别

它会检查URL中是否有合法的lang参数，如果有，则直接返回。如果没有，则检查本地存储（local storage）中是否有合法的lang参数，如果有，则直接返回。

如果本地存储和URL都没有合法的lang参数，则使用navigator.language来判断浏览器语言，并返回对应的语言代码（cn、en、tw等）。如果无法判断浏览器语言，则默认返回cn。

具体函数：

function checkLang(){
    var langs=["cn","en","jp","tw"];


    var lang=getQuery("lang");
    if(lang!=""&&langs.indexOf(lang) > 0 ){
        return lang;
    }
    var lang=getLocalStorage("lang");
    if(lang){
        return lang;
    }

    var navLang = navigator.language
    switch (navLang) {
        case "en-US":
            return "en";
            break;
        case "zh-TW":
            return "tw";
            break;
        default:
            return "cn";
    }

    return "cn";
}

function getQuery(key) {
    var query = window.location.search.substring(1);
    var key_values = query.split("&");
    var params = {};
    key_values.map(function (key_val){
        var key_val_arr = key_val.split("=");
        params[key_val_arr[0]] = key_val_arr[1];
    });
    if(typeof params[key]!="undefined"){
        return params[key];
    }
    return "";
}

//读取localStorge
function getLocalStorage(key){
    if(!navigator.cookieEnabled||typeof window.localStorage == 'undefined'){
        return false;
    }
    var str=localStorage.getItem(key);
    if(!str){
        return "";
    }
    return JSON.parse(str);
}