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示例:

  1. var request = require("request");
  2.  
  3. var options = {
  4. method: 'POST',url: 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13/',form: {
  5. // Client ID & Client secret values (see screenshot)
  6. client_id: 'translator_3000',client_secret: 'ZP8LzjZkKuFAb2qa05+3nNq+uOcqzWK7e3J6qCN1mtg=',scope: 'http://api.microsofttranslator.com',grant_type: 'client_credentials'
  7. }
  8. };
  9.  
  10. request(options,function (error,response,body) {
  11. if (error) throw new Error(error);
  12.  
  13. console.log(body);
  14. });

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

  1. {
  2. "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"
  3. }

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

这里是例子:

  1. var settings = {
  2. "url": "https://api.microsofttranslator.com/v2/Ajax.svc/Translate","method": "GET","dataType": "jsonp","jsonp" : "oncomplete","data" : {
  3. "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"
  4. }
  5. }
  6.  
  7. $.ajax(settings).done(function (response) {
  8. console.log(response);
  9. });

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

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

最后,所有语言代码

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

和所选代码的友好名称

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

包括Official documentation.

猜你在找的HTML相关文章