因为近期要做一个北美校园招聘网站,想实现中/英/法三文切换,语言模块已经配置好了。准备用JS判断跳转来实现这个功能,所以来分享一下。

这里推荐一个非常好用的语言模块Vue-i18n
请移步至文章【Vue-i18n项目实现多语言国际化】

效果的原理

根据识别用户的浏览器语言,自动判断并跳转到相应的语言网页,让你的网站更加灵动。
以下需要将代码放在 HTML 的内即可,然后自行制作多语言页面。
话不多说,直接上代码

方法一

<script type="text/javascript">
//获取用户语言的顺序是
//1.获取本地缓存里的内容
//2.用户浏览器的语言设置
//如果上面2个都没有获取到,就直接使用'en'作为用户选择的语言
var language = localStorage.getItem('locale') || window.navigator.language.toLowerCase() || 'en'
//把用户的语言写入缓存,供下次获取使用
localStorage.setItem('locale', language)
//判断用户的语言,跳转到不同的地方
if (language.indexOf("zh-") !== -1) {
    window.location = '/zh-cn/index.html'
} else if (language.indexOf('en') !== -1) {
    window.location = '/en/index.html'
} else if (language.indexOf('fr') !== -1) {
    window.location = '/fr/index.html'
} else {
    //其它的都使用英文
    window.location = '/en/index.html'
}
</script>

其实核心代码就是利用 navigator 的 language 属性

navigator.language

注意事项

这种方式,是中心枢纽根据用户环境进行分发
这就需要开发人员自己部署多套网站,一般是这样的解决方案

根据用户环境判断,会导致一个情况:中国大陆内的用户,设置英文为首选语言,那么访问网站会被移到对应的英文网站,这样的处理本是没有事情的,但是遇到傻逼的产品经理,可能会感觉应该默认给送到中文网站

方法二

<script type="text/javascript">
  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);//获取浏览器配置语言前两位
  if (lang == "zh"){
      alert(lang);
      //window.location.replace('url');//中文编码时打开链接
  }else if (lang == "en"){
      window.location.replace('url');
  }else{//其他语言编码时打开以下链接
      window.location.replace('url');
  };

文中截取lang的前2位字符,是因为浏览器语言返回值可能是:

  • zh-cn Chinese(PRC)
  • zh-tw Chinese(Taiwan Region)
  • zh-hk Chinese(Hong Kong SAR, PRC)
  • zh-sg Chinese(Singapore)
  • en-us English(United States)
  • en English

HTML+CSS+JS完整版

主要是依靠js修改页面元素的文本来简单实现多语言替换

HTML代码(index.html)

<!DOCTYPE html>
<html>
<head>
    <title>language</title>
    <meta name="Keywords" content="language"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="./content.css" />
    <script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
    <div class="leng_hw">hello word!</div>
    <div class="col-links">
        <div class="dropdown lang">
            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">English<i class="caret"></i></a>
            <ul class="dropdown-menu">
                <li><a href="?lang=en">English</a></li>
                <li><a href="?lang=de">Deutsch</a></li>
                <li><a href="?lang=in">हिन्दी</a></li>
                <li><a href="?lang=id">Indonesia</a></li>
                <li><a href="?lang=kr">한국의</a></li>
                <li><a href="?lang=jp">にほんご</a></li>
            </ul>
        </div>
    </div>
<script type="text/javascript" src="./language.js"></script>
</body>
</html>

CSS代码(content.css)

.col-links {
    width: 20%;
    min-height: auto;
    float: right;
    margin-bottom: 26px;
    margin-top: 30px;
}
 
.col-links .lang {
    display: inline-block;
    font-size: 14px;
    color: #919191;
    border: 1px solid #FFFFFF;
    min-width: 100px;
    box-sizing: border-box;
}
 
.dropdown, .dropup {
    position: relative;
}
 
.col-links .lang>a {
    display: block;
    padding: 8px 20px;
    color: #FFFFFF;
}
 
.col-links .dropdown-menu {
    min-width: 120px;
    padding-top: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
    height: 165px;
    overflow: overlay;
}
 
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
 
.col-links .lang ul li {
    margin-bottom: 0;
    color: #919191;
}
 
.col-links .lang ul li a {
    padding: 5px 15px;
    display: block;
    color: #919191;
}
 
.dropdown-menu>li>a {
    clear: both;
    font-weight: 400;
    line-height: 1.428571429;
    white-space: nowrap;
}
 
.open>.dropdown-menu {
    display: block;
}
 
.dropdown-menu li:hover{
    background: rgba(158, 154, 154, 0.25);
}

JavaScript代码(language.js)

$(function(){
 
    
    var leng_text = {
        "en":{
            "leng_hw":'hello world!',  //元素的class : 文本
            "dropdown-toggle":'English<i class="caret"></i>'  //元素的class : 文本
        },
        "de":{
            "leng_hw":'Hallo Welt!',
            "dropdown-toggle":'Deutsch<i class="caret"></i>'
        },
        "in":{
            "leng_hw":'नमस्ते दुनिया!',
            "dropdown-toggle":'हिन्दी<i class="caret"></i>'
        },
        "kr":{
            "leng_hw":'안녕 세상!',
            "dropdown-toggle":'한국의<i class="caret"></i>'
        },
        "jp":{
            "leng_hw":'こんにちは世界!',
            "dropdown-toggle":'にほんご<i class="caret"></i>'
        }
    }
 
    //获取浏览器语言
    var leng = navigator.language ? navigator.language : "en";
 
    //获取用户选择的语言 例如url:  http://www.***.com/?leng=en
    var lang_search = location.search.split("=")[1];
    if(lang_search){
        leng = lang_search;
    }
 
    //如果leng的长度小于2 默认是en
    if(leng.length < 2){
        leng = "en";
    }
 
    var leng_xh = false;
    
    for (var la in leng_text){
        if(leng.indexOf(la) >= 0){
            leng = la;
            leng_xh = true;
            break;
         }
    }
 
    // 如果没有设置该语言的翻译 默认使用en语言
    if(leng_xh == false){
        leng = "en";
    }
 
    //html中已经有en对应的文本信息,不用执行插入操作
    if(leng != 'en'){
        //插入对应的文本或html元素
        for (var x in leng_text[leng])
        {
            $("."+x).html(leng_text[leng][x]);
 
        }
    }
Last modification:April 28th, 2021 at 08:01 pm
如果觉得我的文章对你有用,请随意赞赏