实现网站中英文切换的三种方法（微软字典整站翻译API已被官方和谐） - 你不知道的巨蟹
实现网站中英文切换的三种方法（微软字典整站翻译API已被官方和谐）
注：这几天发现微软官方把微软字典整站翻译API停止服务了（下面第三种方法目前已无法使用）不知是永久还是暂时，扎心
前言
现在很多公司喜欢把网站做成中英文切换，比如某零食官网
那么问题来了，一般实现中英文切换有哪些方法呢？下面我总结了三种方法（因技术水平有限，若有错误，欢迎留言指正）
解决方法
方法1：（中英文各做一份，然后用不同的文件夹区分开来，点击切换语言时，链接跳转到不同文件夹就行了）
优点：各自的版本是分离开来的，比较稳定，不会出现互相干扰（共用数据库资料的除外）
场景：个人认为符合下面2种场景可以考虑使用这种方法
注：如果切换的语言版本很少，并且本身网站不复杂（比如电商网站不推荐）
整体内容相对固定，布局比较简洁，扁平化，改动不会太频繁的（比如新闻类网站不推荐）
方法2：（借助 jquery 插件——jquery.i18n.properties）
详见：https://blog.csdn.net/aixiaoyang168/article/details/49336709
注：看楼下评论感觉这个博主挺好的，对提问的人也会给予解答
方法3：（使用微软字典整站翻译）
详见：https://blog.csdn.net/CSDN_LQR/article/details/78026254
注：因为怕麻烦又技术渣，所以用的这种方法。如果你问我为什么不用谷歌整站翻译，因为要 FQ , FQ, FQ
Demo（下面代码为方法③原文示例代码，我修改了显示内容和引用了jquery CDN）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p { text-align: center; } </style> </head> <body> <button id="change">中英文切换</button><br /> <p>变变变</p> <div id=""> 开心一天是一天，不开心一天也是一天，为何不放下不开心，选择开心呢 </div> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="js/language.js"></script> <script> $("#change").click(function() { translate(); }) </script> </body> </html>
下面是我根据方法三，用微软字典整站翻译实现中英文切换的 Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button id="change">中英文切换</button><br /> <p style="text-align: center;">变变变</p> <div> 「涂涂: 程序员有三宝：闷骚，加班，修电脑。 产品经理有三宝：山寨，改版，再推倒； 老板有三宝：忽悠，找钱，洗大脑。 SE有三宝：扯蛋，规格，CCB。 项目经理有三宝：进度，流程，做报表。 客户有三宝，我要，我要，我还要！ 运营经理有三宝：数据，活动，搞渠道； 市场经理有三宝：调研，策划，狂跳槽 编辑有三宝：选题，加班，被毙稿。 客户经理有三宝：能吹，勤快，酒量好！ 运营三宝：黄图，抽奖，软文稿； 产品经理有三宝：原型，扯皮，爱吐槽。 团队经理有三宝：团建，开会，评绩效。 HR有三宝：招聘、培训、价值观辅导 猎头顾问有三宝：JD，CV，电话扰。 部门经理有三宝：K人、画饼、吹成效...... 咨询师有三宝：方案，画饼，做简报 运营经理有三宝：注册，活跃，真实没有效。 运营专员有三宝，需求，数据，写战报 敏捷教练有三宝：看板，迭代，狂布道。 我记得程序员三宝是钱多，话少，死得早； 推广人员有三宝～活动～美女～抽奖好！ SQA有三宝：质疑，挑刺，写报告。…… 代码民工有三宝：Bug，Debug，Newbug。 设计人员有三宝：画图，加班，被指点 商务经理有三宝：谈判，换量，到处跑； 测试人员有三宝：较真，温柔，撒撒娇。 甲方有三宝：出纳，会计，大领导。 运维三宝必然是：活多，觉少，人品好；重启，重装，换电脑；随叫随到、通宵不倒、常看《IT运维之道》。」 ————————— </div> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="js/language.js"></script> <script src="js/microsoft.js"></script> <script> $("#change").click(function() { translate(); }) </script> </body> </html>
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();//刷新当前页面. }
①：上面language.js中写死了中文转英文（zh-CHS转en），如果项目需要其他语言的转换，直接对language.js进行自定义扩展即可
②：微软字典整站翻译CDN源码（也就是我上面的microsoft.js）
http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**
补充：不过这方法有个小问题，就是每次点击切换语言后，会有弹出框和hover效果，如下图
弹出框： hover效果：
后经过一番查找，终于找到了解决办法
注：要去掉翻译后出现的弹框和hover效果，不能直接引用 language.js 里面引入的微软字典整站翻译CDN链接
要把CDN的源码拷贝下来，单独放到一个js文件里在引入，
同时，修改源码里面的 Pb = “inline-block” 和 B = “block” 分别改成 Pb = “none” 和 B = “none”