1

以下を考えると

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

このボタンをフックして、翻訳されたテキストを翻訳テキスト領域に入れる機能を処理するにはどうすればよいですか?

4

3 に答える 3

1

あなたは一歩を踏み出しました。「source」変数srcは、HTMLscript要素の属性になる必要があります。

彼らの「はじめに」ドキュメントを詳しく見てみましょう。

ところで、他の人は AJAX を勧めていますが、それは実際にはうまくいきません。Google の URL はサイトでホストされていないため、「同一オリジン」ポリシーにより AJAX を使用できません。Google のアプローチは、サーバー側のコード (Java、ASP.NET、Ruby など) からの API 呼び出しを使用するか、「JSONP」と呼ばれる技術を使用して JavaScript で直接使用することを意図しています。 -飛ぶ。

(この後者のアプローチを使用すると、ページ ソース内で Google Translate API キーが公開されるため、ユーザーが盗む可能性があることにも注意してください。)

追加するために編集: 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>
于 2013-01-28T16:58:21.030 に答える
0

お気に入りの AJAX メソッド (私の場合は JQuery の $.ajax) を使用してその URL に投稿し、応答をテキスト フィールドに入力します。

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

現在、訪問した場合に必要な回答が得られる URL を作成しています。AJAX 要求は、プログラムでその URL にアクセスし、そこからデータを取得します。

于 2013-01-28T16:57:49.727 に答える
0

私はこのように私の質問を解決しました。

<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>
于 2013-03-11T09:03:27.017 に答える