调用Google Ajax API实现划词翻译
醉意游人调用google Ajax api实现划词翻译，我觉得很有搞头，就顺着他的路子继续走了下去。今天折腾一天，算是把想法都实践出来。
上传到网络的地址是：http://liuyangzi.com/uploads/translate.html，欢迎点击试用。
一、调用google ajax api实现中英文互译
在网页 添加Google AJAX 语言 API，需要添加Google AJAX API 脚本标签并调用 google.load("language", "1")：
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
</script>
调用google翻译需要两个容器，传递要翻译的内容和翻译结果。这里使用为什么使用两个函数呢，translate()和translateAll()，划词翻译和全文翻译的目的。
function translate(input,output) {
google.language.detect(input, function(result) {
if (!result.error && result.language) {
google.language.translate(input,src,dest,
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
output.innerHTML = result.translation;}
}); }}); }
function translateAll(){
var input = detailContent.innerHTML;
var output=document.getElementById("destination");
}
我在页面添加了一个下拉框，允许选择“英译汉”和“汉译英”。
<select id="langpair"> <option value="en|zh-CN">英译汉</option> <option value="zh-CN|en">汉译英</option> </select>
但是google.language.translate()如何知道是汉译英还是英译汉呢。下面的代码就解决了这个问题。
var langpair = document.getElementById('langpair');
var pair = langpair.options[langpair.selectedIndex].value.split('|');
var src = pair[0]; var dest = pair[1];
划词翻译后的文本放在哪，这里主要是采用生成一个follow_mouse的对象来实现。
<style>
#follow_mouse{border:1px solid #4D3939; padding:5px; display:none; background:#E28A8A; width:500px; position:absolute;}
</style>
划词翻译要实现划词的功能，首先需要给textarea添加鼠标事件
<textarea id="source" onKeyup="savePos(this)" onMouseDown="savePos(this)" onMouseUp="initialize(this)" onFocus="savePos(this)"></textarea>
然后具体定义鼠标事件
function savePos(textBox){
if(typeof(textBox.selectionStart) == "number"){
start = textBox.selectionStart;
end = textBox.selectionEnd;
}
else if(document.selection){
var range = document.selection.createRange();
if(range.parentElement().id == textBox.id){
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
range_all.moveStart('character', 1);
for (var i = 0; i <= start; i ++){
if (textBox.value.charAt(i) == '\n')
start++;
}
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
range_all.moveStart('character', 1);
for (var i = 0; i <= end; i ++){
if (textBox.value.charAt(i) == '\n')
end ++;
}
}
}
}
function initialize(textBox){
clearTimeout(timer);
savePos(textBox);
var text=detailContent.value;
var output=document.getElementById("follow_mouse");
var input=text.substring(start,end);
if(input!=""){
output.style.top=mousePos.y+20+"px";
output.style.left=mousePos.x+"px";
output.style.display="block";
translate(input,output);
timer=setTimeout(function(){
output.style.display="none";
output.innerHTML="正在翻译...";
},2000);
}
}
下一步就是对选中的文字翻译了
function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
}
else if (document.getSelection) {
return document.getSelection();
}
else if (document.selection) {
return document.selection.createRange().text;
}
}
二、音译
音译的意思是说比如我们中文说“三个妞”，可能音译成英语就是“Thank you”了。
比较可惜的是目前google音译api还不支持中文，阻扰了我的进一步探究。
使用音译api同理需要先加载google ajax api的js代码。这里贴出音译的完整代码。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml/DTD/xhtmll-transitional.dtd">http://www.w3.org/TR/xhtml/DTD/xhtmll-transitional.dtd</a>">
<html >
<head>
<title>GOOGLE AJAX API</title>
<link rel="stylesheet" type="text/css" href="trans.css"/>
<meta http-equiv="content-type" content="text/html;charset=iso-8895-1"/>
<script type="text/javascript" src="<a href="http://www.google.com/jsapi%22%3E%3C/script">http://www.google.com/jsapi"></script</a>>
<link href="<a href="http://www.google.com/uds/modules/elements/transliteration/api.css">
http://www.google.com/uds/modules/elements/transliteration/api.css</a>"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English & Hindi.
control.showControl('translControl', {
controlType: google.elements.transliteration.TransliterationControl.
ControlType.SINGLE_LANGUAGE_BUTTON
});
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body id="transliterate">
<ul id="tabnav">
<li><a href="translate.html">翻译</a></li>
<li><a href="transliterate.html">音译</a></li>
<li><a href="contact.html">联系羊子</a></li>
</ul>
<div id="content">
<h1><center>音译 印度语 (可使用快捷键 Ctrl+g 在印度语和英语间切换)</center></h1>
<div id='translControl'></div>
<br><center><input type='textbox' id="transl1"/> </center><br><center>
<textarea id="transl2" style="width:600px;height:200px"></textarea> </center><br><br>
</body>
</div>
</body>
</html>
三、css样式
就介绍使用伪类改变背景字体，生成如页面所示的书签效果。
body#translate li.translate,body#transliterate li.transliterate,body#contact li.contact{
border-bottom: 1px solid #fff;
color: #000000;
background-color: #fff;
}
body#translate li.translate a:link,body#translate li.translate a:visited,
body#transliterate li.transliterate a:link,body#transliterate li.transliterate a:visited,
body#contact li.contact a:link,body#contact li.contact a:visited,{
color: #000000;
background-color: #fff;
}
四、效果图
翻译页面：
音译页面：
可点击http://liuyangzi.com/uploads/translate.html查看最终效果。
光 
羊叨 
2条评论▼