linux中web的中英文切換
調用微軟頁面翻譯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進行自定義擴展即可。