Учитывая следующие

    <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>

Как я могу подключить эту кнопку, чтобы обработать функцию, чтобы поместить переведенный текст в область текста перевода?

1
Justin Erswell 28 Янв 2013 в 20:53

3 ответа

Лучший ответ

Я решил свой вопрос таким образом.

<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>
0
Justin Erswell 11 Мар 2013 в 09:03

Вы пропустили шаг. Переменная «источник» должна стать атрибутом src элемента HTML script.

Внимательно посмотрите на их документ "Начало работы".

Кстати, другие люди указывают вам на AJAX, но на самом деле это не сработает. Поскольку URL-адрес Google не размещен на вашем сайте, вы не сможете использовать AJAX в соответствии с политикой «того же источника». Подход Google предназначен либо для использования вызова API из серверного кода (например, Java, ASP.NET, Ruby), либо для непосредственного использования в javascript с использованием метода под названием «JSONP», который включает создание элемента «script» на -fly .

(Вам также следует помнить, что при использовании этого последнего подхода вы открываете свой ключ API Google Translate в источнике страницы, чтобы пользователи могли его потенциально украсть.)

Отредактировано, чтобы добавить: вот пример кода из документации Google 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>
1
Jacob Mattison 29 Янв 2013 в 19:29

Вы захотите использовать свой любимый метод AJAX (в JQuery для меня это $ .ajax), чтобы опубликовать этот URL, а затем поместить ответ в текстовое поле.

http://api.jquery.com/jQuery.ajax/

В настоящее время вы создаете URL, который, при посещении, будет иметь нужный вам ответ - запрос AJAX будет программно посещать этот URL и получать от него данные.

0
argentage 28 Янв 2013 в 16:57