Question

我已将Google Translate插件添加到我的网页中。每当用户从插件添加到我的网页的下拉菜单中选择一种语言时，如何才能获得JavaScript函数的回调？ Google Translate API文档似乎没有任何相关信息。我已经阅读了Google Translate插件的JavaScript代码，但我看不到任何有用的内容。

如果我在网页翻译开始之前或者在我的网页翻译结束之后或在网页中任何特定元素的翻译之前或之后收到我的函数回调，也会没问题。

以下是我的网页简化版的HTML：

  <html>
    <head>
    </head>

    <body>

        <!-- Google Website Translator plugin -->

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


        <div>
            <p>This part can be translated using the Google Translator plugin.</p>
        </div>

        <script type="text/javascript">
            function translationCallback() {
                // This function needs to be called when Google translates this web page.
                alert("A language was selected from the Google Translator plugin dropdown");
            }
        </script>
    </body>
</html>

Answer 1

感谢您的回复。根据上述答复中引用的SO问题中的答案和评论，我拼凑了下面适合我的代码。

我为其DOMSubtreeModified事件添加了一个隐藏的div和一个侦听器。当Google翻译隐藏div的内容时，会调用侦听器。但是，每次从插件下拉菜单中选择语言时，都会多次调用侦听器。谷歌似乎正在多次通过。 innerHTML的原始值似乎在除最后一个之外的所有遍中保留为子字符串。所以我在事件处理程序中检查原始的innerHTML子字符串，以避免多次执行代码。

在下拉菜单中为每种语言选择innerHTML的初始值。＆＃39;英语＆＃39;适用于我的情况。

<html>
    <head>
    </head>

    <body>

        <!-- Google Website Translator plugin -->

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


        <div>
            <p>This part can be translated using the Google Translator plugin.</p>
        </div>

        <div id="translationDetector" style="display:none;">English</div>

        <script type="text/javascript">

            var origValue = document.getElementById("translationDetector").innerHTML;

            document.getElementById("translationDetector").addEventListener("DOMSubtreeModified", translationCallback, false);

            function translationCallback() {
                // This function needs to be called when Google translates this web page.

                var currentValue = document.getElementById("translationDetector").innerHTML;

                if (currentValue && currentValue.indexOf(origValue) < 0) {
                    origValue = currentValue;
                    alert("There is a disturbance in the force: " + currentValue);
                }
            }
        </script>
    </body>
</html>

Answer 2

Google翻译js使用Cookie来跟踪当前的语言选择。您可以设置超时来监视cookie的更改。

这是我为Drupal实施的方法，适用于任何JavaScript框架：

  Drupal.exampleLanguageChanged = function() {
if (Drupal.exampleGetCookie('googtrans') != cookieValue) {
  cookieValue = Drupal.exampleGetCookie('googtrans');
  console.log('cookie changed ' + cookieValue);
}
setTimeout(Drupal.exampleLanguageChanged, 500);
  };

  Drupal.exampleGetCookie = function(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length >= 2) {
  return parts.pop().split(";").shift();
}
return '';
  };

  Drupal.behaviors.exampleSimpleTranslation = {
attach: function(context) {
  cookieValue = Drupal.exampleGetCookie('googtrans');
  console.log('cookie value ' + cookieValue);
  setTimeout(Drupal.exampleLanguageChanged, 500);
}
  };

Answer 3

从this问题来看，此代码可以起作用：

var $textfield = find("#google-translate");
var $popup = find("#google_translate_element");
var $select = $popup.find("select");

$textfield.click(function () {
    $popup.fadeIn("fast");
    return false;
});

$select.bind("change", function () {
    $popup.fadeOut("fast");
});

Answer 4

这是一个解决方案，但我不确定我是否喜欢它。基本上，你检查一下文本或页面是否已经改变，然后你是否采取了行动。

Google Translate Widget - Translation complete callback

Google翻译：选择语言时回拨

4 个答案: