实现网站中英文切换的三种方法
注：這幾天發(fā)現(xiàn)微軟官方把微軟字典整站翻譯API停止服務了（下面第三種方法目前已無法使用）不知是永久還是暫時，扎心
前言
現(xiàn)在很多公司喜歡把網站做成中英文切換，比如某零食官網
那么問題來了，一般實現(xiàn)中英文切換有哪些方法呢？下面我總結了三種方法（因技術水平有限，若有錯誤，歡迎留言指正）
解決方法
方法1：（中英文各做一份，然后用不同的文件夾區(qū)分開來，點擊切換語言時，鏈接跳轉到不同文件夾就行了）
優(yōu)點：各自的版本是分離開來的，比較穩(wěn)定，不會出現(xiàn)互相干擾（共用數(shù)據(jù)庫資料的除外）
缺點：修改一個樣式或功能，要把變更的操作（代碼邏輯、更換圖片、修改樣式等）在所有的語言版本上重復一次，加重了工作量
場景：個人認為符合下面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>
下面是我根據(jù)方法三，用微軟字典整站翻譯實現(xiàn)中英文切換的 Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="change">中英文切換</button><br />
<p>變變變</p>
<div>
「涂涂: 程序員有三寶：悶騷，加班，修電腦。 產品經理有三寶：山寨，改版，再推倒； 老板有三寶：忽悠，找錢，洗大腦。 SE有三寶：扯蛋，規(guī)格，CCB。 項目經理有三寶：進度，流程，做報表。 客戶有三寶，我要，我要，我還要！ 運營經理有三寶：數(shù)據(jù)，活動，搞渠道； 市場經理有三寶：調研，策劃，狂跳槽 編輯有三寶：選題，加班，被斃稿。 客戶經理有三寶：能吹，勤快，酒量好！ 運營三寶：黃圖，抽獎，軟文稿； 產品經理有三寶：原型，扯皮，愛吐槽。 團隊經理有三寶：團建，開會，評績效。 HR有三寶：招聘、培訓、價值觀輔導 獵頭顧問有三寶：JD，CV，電話擾。 部門經理有三寶：K人、畫餅、吹成效...... 咨詢師有三寶：方案，畫餅，做簡報 運營經理有三寶：注冊，活躍，真實沒有效。 運營專員有三寶，需求，數(shù)據(jù)，寫戰(zhàn)報 敏捷教練有三寶：看板，迭代，狂布道。 我記得程序員三寶是錢多，話少，死得早； 推廣人員有三寶～活動～美女～抽獎好！ 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效果：
后經過一番查找，終于找到了解決辦法
注：要去掉翻譯后出現(xiàn)的彈框和hover效果，不能直接引用 language.js 里面引入的微軟字典整站翻譯CDN鏈接
要把CDN的源碼拷貝下來，單獨放到一個js文件里在引入，
同時，修改源碼里面的Pb="inline-block"和B="block"分別改成Pb="none"和B="none"
總結
以上是生活随笔為你收集整理的实现网站中英文切换的三种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 谓语
- 下一篇： 【实录】Open AI CEO现身中国“