linux中web中英文切换(六)

linux中web的中英文切换

调用微软页面翻译API : The Translator Web Widget API   实现自动对页面进行中英文翻译

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

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

http://ww2.sinaimg.cn/large/87c01ec7gy1fsseuwazdxj212w0o1dxu.jpg

 

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();

 
  1. <!DOCTYPE html>

  2. <head>

  3. <title>Microsoft Widget API Sample</title>

  4. <meta charset="UTF-8"/>

  5. <script type="text/javascript" src="jquery-1.11.3.js"></script>

  6. <script type="text/javascript" src="language.js"></script>

  7. </head>

  8. <body>

  9. <button id="change">中英文切换</button>

  10. </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

  11. <div style="text-align: center" >

  12. 你好

  13. </div>

  14. </body>

  15. <script type="text/javascript">

  16. $("#change").click(function(){

  17. translate();

  18. })

  19. </script>

  20. </html>

 

三、其他

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章