html页面国际化之谷歌翻译js实践,支持通过判断浏览器语言自动将中文翻译成英文

实践过程
最近boss提出了一个需求，需要支持打开的页面自动翻译成英文，csdn来回找资料，最终确定使用谷歌翻译js插件，这个插件测试只支持手动翻译，没能满足打开页面通过判断浏览器语言自动翻译成英文的需求，只能想办法攻克一下这个问题

确立最终实现目标，实现浏览器设置网页打开语言不是zh-CN 中文的强制转成英文

//获取浏览器语言
var localLanguage;
// console.log(navigator);
if (navigator.language) {localLanguage = navigator.language;
}else {localLanguage = navigator.browserLanguage;
}

分析谷歌js设置，谷歌js固定设置指定语言后，语言后本地会记录cookie标记当前翻译的是什么语言

 // reload 自动强制将网站代码转成英文var isLanguage= GetCookie('googtrans');// 初始化发现浏览器语言是英文的强制将页面文字转成英文if(isLanguage==null && localLanguage=='en'){// 设置cookie  /zh-CN/en  中文转换英文SetCookie("googtrans", '/zh-CN/en', 3, "/", window.location.host, false);var hrefarr=window.location.host.split('.');// 设置cookievar domain="."+hrefarr[1]+'.'+hrefarr[2];SetCookie("googtrans", '/zh-CN/en', 3, "/", domain, false);$('.goog-te-combo').val('en');// reload强制转成英文window.location = '#googtrans(en|en)';location.reload();}}

3.需要转英文的html中引入封装好的谷歌翻译js

<script src="/api/html/GoogleTranslate.js"></script>

//GoogleTranslate.js
//获取浏览器语言
var localLanguage;
// console.log(navigator);
if (navigator.language) {localLanguage = navigator.language;
}else {localLanguage = navigator.browserLanguage;
}// 检查是否支持此语言翻译，不支持就把面板设为中文，或你想要的语言，只能是以上80种语言之一
var allLanguage = 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,en,tr'.split(',');if($.inArray(localLanguage,allLanguage)==-1){localLanguage = "zh-CN";
}   if(localLanguage!='zh-CN'){// 资源请求路径var resourcesUrl = '/api/html/googleTrans/trans';// var resourcesUrl = ctx+"js/plugins/googleTrans";//这里应该写你的服务器资源地址// 这里设置翻译面板的语言，这里通过浏览器获取本地语言，你也可以自己设置// 支持以下80种语言翻译console.log("当前语言环境"+localLanguage);// alert(localLanguage);// window.οnlοad=function(){function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'auto',// 一共80种语言选择，这个是你需要翻译的语言，比如你只需要翻译成越南和英语，这里就只写en,vi// includedLanguages:// 'de,hi,lt,hr,lv,ht,hu,zh-CN,hy,uk,mg,id,ur,mk,ml,mn,af,mr,uz,ms,el,mt,is,it,my,es,et,eu,ar,pt-PT,ja,ne,az,fa,ro,nl,en-GB,no,be,fi,ru,bg,fr,bs,sd,se,si,sk,sl,ga,sn,so,gd,ca,sq,sr,kk,st,km,kn,sv,ko,sw,gl,zh-TW,pt-BR,co,ta,gu,ky,cs,pa,te,tg,th,la,cy,pl,da,tr',includedLanguages: 'zh-CN,en',// 选择语言的样式，layout: google.translate.TranslateElement.InlineLayout.SIMPLE,// 自动显示翻译横幅，就是翻译后顶部出现的那个，有点丑，设置这个属性不起作用的话，请看文章底部的其他方法autoDisplay: false, }, 'trans'// 触发按钮的id);// 自定义按钮样式，因为没有api，通过dom+覆盖样式的方法实现，请查看顶部的style部分$(".goog-te-gadget-icon").remove();$(".goog-te-menu-value").remove();}window.onload=function(){// // reload 自动强制将网站代码转成英文var isLanguage= GetCookie('googtrans');// 初始化发现浏览器语言是英文的强制将页面文字转成英文if(isLanguage==null && localLanguage=='en'){// 设置cookieSetCookie("googtrans", '/zh-CN/en', 3, "/", window.location.host, false);var hrefarr=window.location.host.split('.');// 设置cookievar domain="."+hrefarr[1]+'.'+hrefarr[2];SetCookie("googtrans", '/zh-CN/en', 3, "/", domain, false);$('.goog-te-combo').val('en');// reload强制转成英文window.location = '#googtrans(en|en)';location.reload();}}var googtrans_script = document.createElement("script");googtrans_script.type = "text/javascript";googtrans_script.charset = "UTF-8";googtrans_script.src = '/api/html/googleTrans/trans/js/element.js?cb=googleTranslateElementInit';document.body.appendChild(googtrans_script);
}// 设置cookiefunction SetCookie(a, c, b, d, e, g) {var f = new Date;f.setTime(f.getTime() + b * 86400);b == null || f.toGMTString();document.cookie = a + "=" + escape(c) + (d == null ? "" : ";path=" + d) + (e == null ? "" : ";domain=" + e) + (g == true ? ";secure" : "")}// 获取cookiefunction GetCookie(a) {var c = null,b = document.cookie + ";",d = a + "=",a = b.indexOf(d);a != -1 && (a += d.length, c = b.indexOf(";", a), c = unescape(b.substring(a, c)));return c}function contains(array, obj) { var i = a.length; while (i--) { if (a[i] === obj) { return true; } } return false; }

4.谷歌翻译js插件文件和语言js库资源免费下载不需要积分下载
https://download.csdn.net/download/qq_41407687/12902817

html页面国际化之谷歌翻译js实践,支持通过判断浏览器语言自动将中文翻译成英文相关推荐

html js 浏览器语言,js 判断浏览器语言的方法
今天遇到一个要根据浏览器设置语言的类型,来展示网站的字体.比如,浏览器的语言是中文简体,那么网站也要显示中文简体字,如果是繁体或是英文都要根据浏览器当前设置的语言进行显示.那么,飞鸟慕鱼博客来和大家说 ...
JS实现聊天接收到消息语言自动提醒(您有新的消息请注意查收)
综述最近在开发一个网页端的客服系统,需求要求聊天双方接收到消息能有语音提醒,并且客服端如果存在未读消息要求每隔五分钟给客服语音提醒一下.客服聊天系统使用PHP的Workerman框架进行开发,由于语 ...
magento工具PHP语言,Magento2建立中文翻译语言包
今天要教大家在 Magento2 系统中建立中文翻译的语言包我们要在系统上开始建立语言包,首先先确认 /app/i18n/ 文件夹是否存在? 若不存在就请建立此文件夹接着建立文件夹 /app/i ...
微软翻译与服务器断开,一水的机翻？微软中文翻译也闹笑话了
作为赶超苹果的"演绎中文"新巨头,微软从来没有忘记在中文翻译这件事情上给我们带来惊喜与欢乐.在此前一系列翻译失误平息后,现在在Surface Book官方页面,我们再次发现了&qu ...
c语言关键字中英翻译机课程设计,课程设计--C语言关键字中英翻译机.doc
课程设计--C语言关键字中英翻译机课程设计报告学院.系:吉林大学珠海学院计算机科学与技术系专业名称:计算机科学与技术课程设计科目C语言程序课程设计所在班级:4班学生学号:学生姓名:曾伟雄 ...
c语言关键字翻译课程设计,课程的设计C语言关键字中英翻译机.doc
课程的设计C语言关键字中英翻译机课程设计报告学院.系:吉林大学珠海学院计算机科学与技术系专业名称:计算机科学与技术课程设计科目C语言程序课程设计所在班级:4班学生学号:学生姓名:曾伟雄指 ...
用python做一个文本翻译器，自动将中文翻译成英文，超方便的
translate非标准库是python中可以实现对多种语言进行互相翻译的库,使用时只需要设置目标语言(比如:中文.英文)后,会自动将原始文本翻译成我们需要的目标语言. [阅读全文] 使用pip的方式 ...
我觉得那台计算机使用便利英语翻译,我正准备使用计算机的翻译是：I was going to use the computer 中文翻译英文意思，翻译英语...
[object Object] I was going to use the computer I was preparing to use the computer I am preparing t ...
怎么把知网的外文文献翻译成中文_知网能把论文中文翻成英文查重吗？
学校要求学生写论文是一种再常见不过的操作了,不同的学校对学生的要求是不一样的,提出不同的要求,所写出的论文的篇幅.格式都会有所不同,将文章拿到不同的网站上检测,得出的结果也是不一样的.在面对这种情况的 ...

html页面国际化之谷歌翻译js实践,支持通过判断浏览器语言自动将中文翻译成英文

html页面国际化之谷歌翻译js实践,支持通过判断浏览器语言自动将中文翻译成英文相关推荐

最新文章

热门文章