这可能是目前最方便的网站中英文切换(理论支持所有语言)

原创 2017年09月19日 09:23:43

一、简述

公司最近做的一个官网项目,要求把页面成国际化,实现中英文切换,为此,我在网上找了一些中英文切换的解决方案,大概为如下两种:

1、使用谷歌整站翻译Api

2、自己编写中英文对照表,用js控制

由于公司的要求是把整站进行翻译,且官网中存在新闻,即存在大量不可预料的数据,同时考虑到富文本数据不好翻译。所以,总的来说,第一种方案最为合适,不过可惜,需要梯子,没办法,只能别寻出路。好在微软也有一个类似谷歌整站翻译的Api:

The Translator Web Widget API

其实,微软提供的Demo实现上也很简单,分如下几步:

  1. 引入The Translator Web Widget API
  2. 监听dom加载完毕,调用Microsoft.Translator.Widget.Translate()整站翻译。

二、实现

1、封装language.js

根据上面的对微软提供的Demo的研究,我们对此进一步封装,因为中英文切换一般都是一次点击后,往后的统一每个页面都需要或不需要翻译,这就需要记录一个状态值,这里选用html5提供的storage来储存这个状态,并向外提供一个修改该状态并刷新页面的方法。故,该js(language.js)编写如下:

$(function(){ 
      // do something 
    var script=document.createElement("script");  
    script.type="text/javascript";  
    script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";  
    document.getElementsByTagName('head')[0].appendChild(script);  


    var value = sessionStorage.getItem("language");
    document.onreadystatechange = function () {
        if (document.readyState == 'complete') {
            if(value==="1"){
                Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
            }
        }
    }
    function onProgress(value) {
    }
    function onError(error) {
    }
    function onComplete() {
        $("#WidgetFloaterPanels").hide();
    }
    function onRestoreOriginal() { 
    }
});

function translate(){
    var value = sessionStorage.getItem("language");
    if(value==="1"){
        sessionStorage.setItem("language", "0"); 
    }else{
        sessionStorage.setItem("language", "1");
    }
    window.location.reload();//刷新当前页面.
}

2、编写测试页面

编写一个测试页面(test.html)。要使用上面的language.js,必须进行以下三步:

  1. 设置页面编码为utf-8
  2. 引入jquery和language.js
  3. 设置按钮的点击事件,去调用中英文切换函数:translate();
    <!DOCTYPE html>
    <head>
        <title>Microsoft Widget API Sample</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript" src="jquery-1.11.3.js"></script>
        <script type="text/javascript" src="language.js"></script>
    </head>
    <body>
        <button id="change">中英文切换</button
        </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
        <div style="text-align: center" >
            你好
        </div>
    </body>
    <script type="text/javascript">
        $("#change").click(function(){
            translate();
        })
    </script>
    </html>

试试看效果吧,反正我觉得还行~

三、其他

上面编写的language.js中写死了中文转英文(zh-CHS转en),如果项目需要其他语言的转换,对language.js进行自定义扩展即可。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/CSDN_LQR/article/details/78026254

html页面如何实现中英文切换?

如何实现html页面的双语切换呢?最粗暴的办法是做两个页面,一个中文的,一个英文的。稍微温和的方法是:在每次显示之前,对当前的语言标志进行判断,用if和else来解决,其实,这种办法虽然没有那么粗暴,...
  • stpeace
  • stpeace
  • 2013-09-01 22:10:08
  • 38210

HTML实现简单中英文切换(仅限小页面)

最近一个网页项目实现中英文切换,网上的各种方法众多,有谷歌和360api的自动翻译接口,自建库等等,但是我想实现的不过是在我这个页面点击切换语言即可,思路是替换原有div,只有几行代码,(ps:觉得没...
  • qq_34835428
  • qq_34835428
  • 2017-11-30 16:00:32
  • 879

静态网站的中英文等多语言切换

之前做过一个项目,项目要求中英文实现
  • czyhy
  • czyhy
  • 2014-07-10 11:07:16
  • 3167

java web 项目实现手动中英文切换

java国际化实现思路     Java程序的国际化思路是将程序中的标签、提示信息等放在资源文件中,程序需要支持国家/语言环境,则必须提供对应的资源文件。资源文件是key-value对,每个资源文件中...
  • ldybing
  • ldybing
  • 2016-08-16 12:17:32
  • 6830

html+jquery实现页面中英文切换

目的: 前端(只采用thymeleaf模板+jquery) 实现国际化由: 前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量 采用jquer...
  • u010039979
  • u010039979
  • 2016-11-29 13:48:07
  • 9259

网页中英文切换

test.html文件: var lang_flag = 1; ...
  • wowoniuzailushang
  • wowoniuzailushang
  • 2016-11-28 09:39:29
  • 271

struts2的国际化(即实现网站整体中英文切换)实例

环境要求:Struts2框架环境搭建成功 为了实现程序的国际化,必须先提供程序所需要的资源文件。资源文件的内容基本是key-value对,其中key是程序使用的部分,而value是程序的显示部分...
  • weixin_36380516
  • weixin_36380516
  • 2017-05-18 21:19:00
  • 4068

关于网站做多语言切换功能的最简单实现思路

PHP服务端: 在$_SERVER['HTTP_ACCEPT_LANGUAGE'] 中 [HTTP_ACCEPT_LANGUAGE] => zh-CN,en-US;q=0.8,zh;q=0.6,e...
  • u012972536
  • u012972536
  • 2017-04-26 12:58:19
  • 1164

web网站语言切换特效|jQuery网站特效代码

  • 2017年02月02日 22:42
  • 53KB
  • 下载

HTML页面多语言切换

部门有个Web UI产品,里面有项功能是语言切换。之前同事的做法是把每个页面都做另做一份,语言切换时改变URL即可。简单的页面还好,如果遇到更多语言和复杂页面难免会增加维护难度。后来另一个同事用jQu...
  • dowithsmiles
  • dowithsmiles
  • 2013-02-01 12:30:52
  • 15991
收藏助手
不良信息举报
您举报文章:这可能是目前最方便的网站中英文切换(理论支持所有语言)
举报原因:
原因补充:

(最多只允许输入30个字)