html – 如何分别为每个div创建微软/谷歌翻译按钮?

前端之家收集整理的这篇文章主要介绍了html – 如何分别为每个div创建微软/谷歌翻译按钮?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何为每个div创建微软或谷歌翻译按钮?

每个div都有不同语言的内容,我想为每个div添加一个翻译按钮,并使其仅响应以下链接中的按钮.

http://www.bing.com/widget/translator

但是当我使用上面链接中提到的代码时,它会翻译整个网页.我想通过点击相应的翻译按钮分别翻译每个div.

使用谷歌翻译可以轻松地完成同样的事情吗?
任何翻译对我都好请帮忙谢谢.

这个用户的帖子如何显示在我的网站上.

我想为每个div提供一个翻译按钮,以便用户可以将每个div翻译成他们想要的任何语言.

我的每个div都有一个id.

解决方法

下面我将解释如何开始使用Microsoft Translator API.可以通过Google Translate API实现相同的功能,但是对于我来说,MS更容易为MS提供2M字符/每月免费翻译,而Google最少收取1 $的测试费用.

先决条件:

>注册免费订阅Microsoft Translator.为此,您将被要求创建新的MS帐户或登录与现有的.
>在Azure Datamarket注册您的申请.

注册示例注意:这里有两个重要字段的客户端ID和客户机密码,您将需要它们进行访问令牌请求.

执行:

首先,API的每个请求应包括访问令牌.到期时间为10分钟,所以您必须在到期之前更新.理想情况下,应该在后端进行此过程,以保护您的客户机密码和结果(令牌到期时间)发送回Web应用程序.

Node.js示例:

var request = require("request");

var options = { 
  method: 'POST',url: 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13/',form: { 
     // Client ID & Client secret values (see screenshot)
     client_id: 'translator_3000',client_secret: 'ZP8LzjZkKuFAb2qa05+3nNq+uOcqzWK7e3J6qCN1mtg=',scope: 'http://api.microsofttranslator.com',grant_type: 'client_credentials' 
  } 
};

request(options,function (error,response,body) {
  if (error) throw new Error(error);

  console.log(body);
});

响应包含几个字段,包括access_token,使用其值进一步的请求.

{
  "token_type": "http://schemas.xmlsoap.org/ws/2009/11/swt-token-profile-1.0","access_token": "http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fnameidentifier=translator_3000&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&Audience=http%3a%2f%2fapi.microsofttranslator.com&ExpiresOn=1435405881&Issuer=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&HMACSHA256=st9LJ0F8CKSa6Ls59gQN0EqMWLFed5ftkJiOCVXE4ns%3d","expires_in": "600","scope": "http://api.microsofttranslator.com"
}

现在,当我们有访问令时,是翻译请求的时候了.注意:这些是JSONP请求,访问令牌是使用格式Bearer< token>的查询字符串参数appId提供的. (以空格分隔).查询字符串还包括文本参数 – 您的帖子的文本以及用户选择的参数 – 语言代码,所有支持代码列表和您可以从API获得的语言友好名称.

这里是例子:

var settings = {
  "url": "https://api.microsofttranslator.com/v2/Ajax.svc/Translate","method": "GET","dataType": "jsonp","jsonp" : "oncomplete","data" : {
    "text" : "Good Morning StackOverflow","to" : "uk","appId" : "Bearer http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fnameidentifier=translator_3000&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&Audience=http%3a%2f%2fapi.microsofttranslator.com&ExpiresOn=1435405881&Issuer=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&HMACSHA256=st9LJ0F8CKSa6Ls59gQN0EqMWLFed5ftkJiOCVXE4ns%3d"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

响应是翻译的字符串,以替换为原始文本:

"Доброго ранку StackOverflow"

最后,所有语言代码

http://api.microsofttranslator.com/V2/Ajax.svc/GetLanguagesForTranslate

和所选代码的友好名称

http://api.microsofttranslator.com/V2/Ajax.svc/GetLanguageNames?locale=en&languageCodes=["en","de","es","uk"]

包括Official documentation.

猜你在找的HTML相关文章