谷歌翻译/基本Javascript问题
Google Translate / Basic Javascript issue
给定以下内容
<textarea style="width: 150px; height: 150px" id="sourceText">Hello Justin how are you today?</textarea>
<textarea style="width: 150px; height: 150px" id="translation"></textarea>
<button id="translateMe" value="Translate!" onclick="translateThis();"></button>
<script>
function translateText(response) {document.getElementById("translation").innerHTML += response.data.translations[0].translatedText;}
function translateThis(){
var sourceText = escape(document.getElementById("sourceText").innerHTML);
var source = 'https://www.googleapis.com/language/translate/v2?key=MY_KEY_HERE&source=en&target=es&callback=translateText&q=' + sourceText;
return source;
}
</script>
如何连接此按钮以处理将翻译文本放入翻译文本区域的函数?
你省略了一个步骤。 "源"变量需要成为 HTML script
元素的src
属性。
仔细看看他们的"入门"文档。
顺便说一下,其他人将您指向 AJAX,但这实际上行不通。 由于 Google 网址未托管在您的网站上,因此"同源"政策将阻止您使用 AJAX。 Google方法旨在使用来自服务器端代码(例如Java,ASP.NET,Ruby)的API调用,或者使用称为"JSONP"的技术直接在javascript中使用,该技术涉及即时创建"脚本"元素。
(您还应该知道,当您使用后一种方法时,您将在页面源代码中暴露您的谷歌翻译API密钥,因此用户可能会窃取它。
编辑添加:以下是来自谷歌API文档的示例代码:
<div id="sourceText">Hello world</div>
<div id="translation"></div>
<script>
function translateText(response) {
document.getElementById("translation").innerHTML += "<br>" + response.data.translations[0].translatedText;
}
</script>
<script>
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("sourceText").innerHTML);
// WARNING: be aware that YOUR-API-KEY inside html is viewable by all your users.
// Restrict your key to designated domains or use a proxy to hide your key
// to avoid misuage by other party.
var source = 'https://www.googleapis.com/language/translate/v2?key=YOUR-API-KEY&source=en&target=de&callback=translateText&q=' + sourceText;
newScript.src = source;
// When we add this script to the head, the request is sent off.
document.getElementsByTagName('head')[0].appendChild(newScript);
</script>
您将需要使用您最喜欢的 AJAX 方法(我的方法是 JQuery 中的 $.ajax)发布到该 URL,然后将响应放入您的文本字段中。
http://api.jquery.com/jQuery.ajax/
目前,您正在构建一个 URL,如果访问该 URL,它将获得您想要的答案 - AJAX 请求将以编程方式访问该 URL 并从中获取数据。
我以这种方式解决了我的问题。
<script>
function callbackDescription(response) {
document.getElementById("siteDesc" + langCode).innerHTML = response.data.translations[0].translatedText;
}
var langCode;
function translateToLangCode(lang) {
langCode = lang;
translateDescription();
}
function translateDescription() {
var faciDescScript = document.createElement('script');
faciDescScript.type = 'text/javascript';
var sourceText = escape(document.getElementById("siteDescEN").innerHTML);
var faciDesc = 'https://www.googleapis.com/language/translate/v2?key=API_KEY_HEREsource=en&target=' + langCode.toLowerCase() + '&callback=callbackDescription&q=' + sourceText;
faciDescScript.src = faciDesc;
document.getElementsByTagName('head')[0].appendChild(faciDescScript);
}
</script>
相关文章:
- javascript问题正文样式
- 将代码放入click函数时出现javascript问题
- 奇怪的javascript问题
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 多上传的JavaScript问题
- 使用YouTube iFrame API的IE中的JavaScript问题
- 关于函数的Javascript问题 - IIFE
- Javascript问题与下拉菜单上的单击事件有关
- JavaScript 问题 - 意外的令牌 (.
- Chrome 中的 JavaScript 问题
- 在javascript问题中应用复合css规则
- Javascript问题,flexslider脚本未加载
- document.write和document.innerHTML以及其他javascript问题之间有什么区别
- jQuery到纯javaScript问题
- javascript问题后的onblur和onfocus
- 谷歌地图API和JavaScript问题:-(
- 第三方javascript问题
- javascript问题中的全局变量
- 嵌套if的javascript问题
- 绑定的Javascript问题