web网页多语言的实现方案_前端实现多语言切换

时间: 2018-04-19阅读: 5464标签: 语言

实现的效果

需要在web中实现多语言的切换,当用户语言切换完成后下次重新打开网页,也是上次设置的语言进行显示。


实现步骤

1、在用户点击切换语言后,把选择的语言版本保存在cookie中 

//写入cookie函数
function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//获取cookie
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
    else
    return null;
}

//setCookie('lan','hk');    繁体中文
//setCookie('lan','cn');    简体中文
//setCookie('lan','en');    英文


2、在包含静态文本的标签中,添加一个属性:set-lan=”html:name” ,属性值中的html代表内容的位置,name代表要替换的文字的标识 。例如:  

<span set-lan="html:name">名字</span>
<input type="text" value="名字" set-lan="val:name" />

这些就需要前端工程师在开发过程中添加进去,并且,要切换语言文字的外面都必须要有一个标签包裹,否则无法进行切换;
如:
<span set-lan="html:name"><i class="icon"></i>名字</span>
这样的代码,是无法把“名字”替换成“Name”的,会把“名字”前面的i标签也一起替换掉,如果不想把i标签也替换掉,就要在“名字”外面添加一个标签,改成:
<span><i class="icon"></i><lan set-lan="html:name">名字</lan></span>


3、定义3个语言的标识+内容的json字符串  

var cn = {
            "name" : "姓名",
            "tel" : "电话",
            "email" : "邮箱",
        };

var hk = {
            "name" : "姓名",
            "tel" : "電話",
            "email" : "郵箱",
        };

var en = {
            "name" : "Name",
            "tel" : "Tel",
            "email" : "Email",
        };


4、遍历带set-lan属性的标签,进行文本替换 

$('[set-lan]').each(function(){
    var me = $(this);
    var a = me.attr('set-lan').split(':');
    var p = a[0];   //文字放置位置
    var m = a[1];   //文字的标识

    //用户选择语言后保存在cookie中,这里读取cookie中的语言版本
    var lan = getCookie('lan');

    //选取语言文字
    switch(lan){
        case 'cn':
            var t = cn[m];  //这里cn[m]中的cn是上面定义的json字符串的变量名,m是json中的键,用此方式读取到json中的值
            break;
        case 'en':
            var t = en[m];
            break;
        default:
            var t = hk[m];
    }

    //如果所选语言的json中没有此内容就选取其他语言显示
    if(t==undefined) t = cn[m];
    if(t==undefined) t = en[m];
    if(t==undefined) t = hk[m];

    if(t==undefined) return true;   //如果还是没有就跳出

    //文字放置位置有(html,val等,可以自己添加)
    switch(p){
        case 'html':
            me.html(t);
            break;
        case 'val':
        case 'value':
            me.val(t);
            break;
        default:
            me.html(t);
    }

});


5、以上是html中的文字替换,但是写在js中的文字怎么办? 可以定义一个函数,来读取  

function get_lan(m)
{
    //获取文字
    var lan = getCookie('lan');     //语言版本
    //选取语言文字
    switch(lan){
        case 'cn':
            var t = cn[m];
            break;
        case 'hk':
            var t = hk[m];
            break;
        default:
            var t = en[m];
    }

    //如果所选语言的json中没有此内容就选取其他语言显示
    if(t==undefined) t = cn[m];
    if(t==undefined) t = en[m];
    if(t==undefined) t = hk[m];

    if(t==undefined) t = m; //如果还是没有就返回他的标识

    return t;
}

那么在js中使用的文字就只要用此函数来读取就可以了 ,如  

alert('姓名');
//改成
alert(get_lan('name'));

转载来源:ttps://blog.csdn.net/codercwm/article/details/60573583


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/673

关闭

微软推出新编程语言 Bosque,超越结构化程序设计

微软近期推出了一款全新的编程语言 Bosque,该语言参考了 TypeScript 的语法与类型,还有 ML 和 Node/JavaScript 的语义。作者微软计算机科学家 Mark Marron 致力于消除编程过程中出现的各种复杂情况,创造出了他认为超越主流结构化程序设计的 Bosque 这一语言。

快速学会Dart语言

在Dart中,一切都是对象,一切对象都是class的实例,哪怕是数字类型、方法甚至null都是对象,所有的对象都是继承自Object;虽然Dart是强类型语言,但变量类型是可选的因为Dart可以自动推断变量类型

前端国际化的另类方式

一个项目发展到一定的环境或者一开始就是为多国打造的,就需要考虑国际化了。简单来说,就是一套页面,多套语言。主要探讨了两种完全不同的国际化方式,前一种主流,后一种完全属于另类,但还是有用武之地的。如果你的页面不太复杂,完全可以采取这种方式。

WebAssembly的前世今身

接触WebAssembly之后,在google上看了很多资料。感觉对WebAssembly的使用、介绍、意义都说的比较模糊和笼统。感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成功,要么就是不知所云

javascript是编译型还是解释型?

javascript是解释型的,是直译式脚本语言。javascript是不需要编译的,浏览器直接解释源代码,并执行在内存中创建变量等操作。

angular多语言配置

angular的国际化方案,采用ngx-translate来实现。我们希望可以在一个固定的文件里面配置对应的翻译文件,然后在每个用到的组件里面使用它,随意我们需要借助TranslateHttpLoader来加载翻译文件。

Hello World各类编程语言写法

Hello World程序指的是指在计算机屏幕上输出Hello, World!(意为「世界,你好!」)这行字符串的计算机程序。一般来说,这是每一种计算机编程语言中最基本、最简单的程序,亦通常是初学者所编写的第一个程序

JavaScript是如何成为一门真正的编程语言的?

说到 JavaScript 的历史,最耳熟能详的便是网景公司在1995年雇佣 Brendan Eich,后者花了10天便设计出初版 JavaScript 的故事了。一方面由于设计之初的理念所致,另一方面受限于沙箱机制所隔离的能力

谁将取代 JavaScript?

谁能取代 JavaScript 似乎是一个老生常谈的话题,很多人都提出过各自不同的看法。本文作者则提出了一个新的视角供你参考:JavaScript 风头正劲,但 WebAssembly 可能已经敲响了它的丧钟

javascript基于什么标准

JavaScript是基于基于ECMAScript标准的。JavaScript不局限于某个特定版本的ECMAScript规范,并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广