網頁框架類APP實現國際化參考文案一
參考：https://blog.csdn.net/CSDN_LQR/article/details/78026254
另外付有自己實現的方法 本人用於H5版的APP使用
一、簡述
把頁面成國際化，實現中英文切換，為此，網上找了一些中英文切換的解決方案，大概為如下兩種：
1、使用谷歌整站翻譯Api
優點：只須調用接口，即可輕松完成整站翻譯，翻譯准確度還行。
缺點：需要梯子。
參考文章：js代碼實現網站中英文相互翻譯
2、自己編寫中英文對照表，用js控制
優點：一對一翻譯，所以准確度最高。
缺點：需要編寫大量中英文對照表，只適合於少量的固定翻譯。
參考文章：html頁面如何實現中英文切換？
由於公司的要求是把整站進行翻譯，且官網中存在新聞，即存在大量不可預料的數據，同時考慮到富文本數據不好翻譯。所以，總的來說，第一種方案最為合適，不過可惜，需要梯子，沒辦法，只能別尋出路。好在微軟也有一個類似谷歌整站翻譯的Api：
The Translator Web Widget API
其實，微軟提供的Demo實現上也很簡單，分如下幾步：
引入The Translator Web Widget API
監聽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，必須進行以下三步：
設置頁面編碼為utf-8
引入jquery和language.js
設置按鈕的點擊事件，去調用中英文切換函數：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進行自定義擴展即可。
附：
我簡單的用requere實現了下 ，支持中英韓語，默認其他均英語
首先將一入幾個自己寫好的語言包：key為中文；value為相應國際化的語言，每次動態加載value 就闊以了
eg:我稱為語言包
define(function(){
var object = {
"年":"year", "月":"month", "周":"week", "日":"day", "時":"hour", "分":"minute", "秒":"seconds",
}
return object
}
加載邏輯：
define(function(){ //<-- ####### internationalization ########## --> var languageObj=null switch (navigator.language) { case "zh-CN": languageObj={} break; case "en-US": loadModule('english') break; case "ko-KR": loadModule('korean') break; default: loadModule('english') break; } function loadModule(jsModule,black){ require([jsModule], function(obj){ languageObj = obj typeof block =="function"&&block(obj) }) } var internationalization = { tell:function (key) { return languageObj[key]||key } } window.$i18n=internationalization.tell return internationalization })
由於部分機型的適配問題
更改為提前加載英語語言包
define(["english"], function(englishObj) { //<-- ####### internationalization ########## --> var internationalization = { tell: function(key) { switch (navigator.language) { case "zh-CN": return key break; case "en-US": return englishObj[key]||key break; case "ko-KR": return englishObj[key]||key break; default: return englishObj[key]||key break; } } } window.$i18n = internationalization.tell return internationalization })
啟動加載后在需要國際化處理的地方通通用$i18n("中文")即可
簡單可行。