网页取词并调用Google Translate-优快云博客

本文介绍了一个网页翻译实现方案，利用Google API进行语言检测及翻译，并提供了Unicode字体渲染支持的检测方法。通过示例代码展示了如何在网页上实现文本翻译功能及字体渲染检测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. translate.html

<html> <head> <mce:script src="http://graphics8.nytimes.com/js/common.js" mce_src="http://graphics8.nytimes.com/js/common.js" type="text/javascript"></mce:script> <mce:script type="text/javascript" language="JavaScript" src="file:///C:/Documents%20and%20Settings/bonny/My%20Documents/GoogleApps/FreeTranslator/altClickToSearch.js" mce_src="file:///C:/Documents%20and%20Settings/bonny/My%20Documents/GoogleApps/FreeTranslator/altClickToSearch.js"></mce:script> <mce:script type="text/javascript" src="http://www.google.com/jsapi" mce_src="http://www.google.com/jsapi"></mce:script> <link href="http://www.google.com/uds/modules/elements/transliteration/api.css" mce_href="http://www.google.com/uds/modules/elements/transliteration/api.css" type="text/css" rel="stylesheet"/> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="text">你好，见到你很高兴!</div> <div id="translation"></div> <p>Detection of Unicode font rendering supportNew! Browsers and operating systems may or may not have the support for rendering particular Unicode fonts. You can detect whether the user using your webpage has support for rendering the fonts of a given language in a readable way or not using the font rendering support detection API. Please note that this works correctly for Unicode fonts alone. If your webpage renders using non-Unicode fonts, this function will not be useful for you. If font rendering support is not present for a given language, there are several solutions available to fix this - please read this article for more information.</p> <textarea id="transliterateTextarea" style="width:600px;height:200px">

2. altClickToSearch.js

NYTD.require("http://graphics8.nytimes.com/js/app/lib/prototype/1.6.0.2/prototype.js", function(){NYTD.WordReference.initialize();}); NYTD.WordReference = (function(){ var selection, selectionText, selectionButton, newRange; function handleClick(event) { if (selectionButton){ cleanUp(); } selection = getSelection(); selectionText = selection && selection.toString(); if (selectionText) { window.setTimeout(insertButton, 0); event.stop(); } } function getSelection() { return Try.these( function() { return window.getSelection() }, function() { return document.getSelection() }, function() { var selection = document.selection && document.selection.createRange(); selection.toString = function() { return this.text }; return selection; } ) || false; } function insertButton() { selectionButton = new Element( 'span', { 'className':'nytd_selection_button', 'id':'nytd_selection_button', 'title':'Lookup Word', 'style': 'margin:-20px 0 0 -20px; position:absolute; background:url (http://graphics8.nytimes.com/images/global/word_reference/ref_bubble.png);width:25px;height:29px;cursor:pointer;_background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://graphics8.nytimes.com/images/global/word_reference/ref_bubble.png", sizingMethod="image");' } ) if (Prototype.Browser.IE) { var tmp = new Element('div'); tmp.appendChild(selectionButton); newRange = selection.duplicate(); newRange.setEndPoint( "StartToEnd", selection); newRange.pasteHTML(tmp.innerHTML); selectionButton = $('nytd_selection_button'); } else { var range = selection.getRangeAt(0); newRange = document.createRange(); newRange.setStart(selection.focusNode, range.endOffset); newRange.insertNode(selectionButton); } Element.observe(selectionButton, 'mouseup', exportSelection, true); } function cleanUp() { selection = null; selectionButton.stopObserving('mouseup', exportSelection); newRange && newRange.pasteHTML && newRange.pasteHTML(''); newRange = null; selectionButton.remove(); selectionButton = null; selectionText = ''; } function exportSelection(event) { // var url = 'http://www.google.com/dictionary?langpair=en|zh-CN&q=' + encodeURIComponent(selectionText) + '&hl=zh-CN&aq=f'; // var newwin = window.open(url,'answersdotcom','height=450,width=820,location=false,menubar=false,toolbar=false,status=false,resizable, scrollbars'); // if (newwin) newwin.focus(); // event.stop(); google.language.translate(selectionText, "en", "zh-CN", function(result) { if (!result.error) { alert(encodeURIComponent(selectionText) +":"+result.translation); } }); } return { initialize: function() { document.observe('mouseup', handleClick, false); } }; })();