Question

我在stackoverflow上找到了这段代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Test Google translate</title>
  <style>
    .skiptranslate,
    #google_translate_element {
      display: none;
    }
    
    body {
      min-height: 0px !important;
      position: static !important;
      top: 0px !important;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>

<body>
  The text is translated using Google translate.
  <div id="google_translate_element"></div>
  <script type="text/javascript">
    function googleTranslateElementInit() {
      $.when(
        new google.translate.TranslateElement({
          pageLanguage: 'en',
          includedLanguages: 'es',
          layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT
        }, 'google_translate_element')
      ).done(function() {
        var select = document.getElementsByClassName('goog-te-combo')[0];
        select.selectedIndex = 1;
        select.addEventListener('click', function() {
          select.dispatchEvent(new Event('change'));
        });
        select.click();
      });
    }
  </script>
</body>

</html>

我想问的是，加载后如何自动将网页翻译成特定的语言。上面的代码不起作用。有什么办法吗？

Answer 1

只要您从代码中删除以下代码段，问题中的代码即可正常工作（以下带有一些附加说明）：

<style>
    .skiptranslate, #google_translate_element {display: none;}
    body {min-height: 0px !important; position: static !important; top: 0px !important;}
</style>

https://jsfiddle.net/q6L75dor/这将产生以下结果：

但是有时确实失败了，因为我在Chrome开发工具中收到有关跨域读取阻止的警告：

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://translate.googleapis.com/translate_a/l?client=te&alpha=true&hl=en&cb=_callbacks____0jtsqm3f5 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

因此，在生产环境中使用该产品之前，您可能必须更彻底地进行研究。另外，有时它是自动运行的，有时它只有在我手动单击下拉列表后才起作用（请注意，在代码中它将单击处理程序附加到下拉列表中），因此，这可能与加载时间或其他有关。也许也值得研究。

网页的自动语言翻译

1 个答案: