google translate api 使用js翻译页面答案

【问题标题】：google translate api translate page using jsgoogle translate api 使用js翻译页面
【发布时间】：2018-06-06 11:13:01
【问题描述】：

我想用js更改页面语言我正在使用谷歌翻译。

使用我的代码正在更改下拉值，但我认为我们需要触发任何ajax，所以它会被翻译。请提出任何解决方案

我正在尝试这段代码，但它不起作用。

$('.goog-te-combo').val('ur').trigger('change');
$('.goog-te-combo').find('select').trigger('change');

这是我的代码

<!DOCTYPE html>
<html>
 <head>

  <script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: '/en/ur'}, 'google_translate_element');
  }
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</head>
<body>

<p>You can translate the content of this page by selecting a language in the select box.</p>


<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>




<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).bind('load', function()
{
    $('.goog-te-combo').val('ur');

});
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery api google-translate

【解决方案1】：

从您提供的代码来看，您似乎从未进行过 API 调用请求翻译某些文本。以下documentation 详细说明了 API 调用所需的查询格式。您需要在查询中指定需要翻译的网页部分。翻译后的字符串将按照它们传递的相同顺序在数组中返回。以下是基于您提供的示例代码：

<body>
    <p id="textField">You can translate the content of this page by selecting a language in the select box.</p>
    <h1 id="title">My Web Page</h1>
    <p>Hello everybody!</p>
    <p>Translate this page:</p>
    <form>
        <select id="targetLanguage">
            <option value="ZH">Chinese (Mandarin)</option>
            <option value="CS">Czech</option>
            <option value="DA">Danish</option>
            <option value="NL">Dutch</option>
            <option value="EN">English</option>
            <option value="ET">Estonian</option>
            <option value="FR" selected = "selected">French</option>
        </select>

        <input type="button" id="translateButton" value="Translate" />
    </form>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#translateButton").click(function () {

            var url = "https://translation.googleapis.com/language/translate/v2";
            //Strings requiring translation
            url += "?q=" + escape($("#textField").text());
            url += "&q=" + escape($("#title").text());
            //Target language
            url += "&target=" + $("#targetLanguage").val();
            //Replace with your API key
            url += "&key=YOUR_API_KEY";
            $.get(url, function (data, status) {
                //Results are returned in an array following the order they were passed. 
                $("#textField").text(data.data.translations[0].translatedText);
                $("#title").text(data.data.translations[1].translatedText);
            });       
        });
    </script>  
</body>

您可以通过将它们包含在下拉菜单中来添加更多目标语言。这是完整的list 支持的语言及其代码。

【讨论】：

上述方法有一个固定长度的字符串，因为我们使用的是get方法。如何为 4000 个字符的较长文本实现相同的功能？